图片作为<input type =“button”/>的值

Question

control-buttnos的界面在默认浏览器的样式上发布。我尝试使用非标准的按钮（）的图像作为值

HTML：

<div id="control-play" class="button"><span></span><input type="button" value=""/></div> 

CSS：

#control-play span {background-image: url('../i/ruler/play.png'); margin: 16px 0 0 18px; position: absolute; width: 16px; height: 16px;} 

但是，当然，我得到了一个问题：悬停时，光标悬停事件图片：

在JS我可以激活点击b Ÿ捕捉图像的onClick：

$('#control-play span').click(function(){$(this).parent().find('input').click();}) 

但我不能这样做，对onHover选项事件。如你所见，我不会模仿：hover {}和：active（）样式，我使用默认样式。我可以抓取图像并将它们用作背景，但它似乎不是一种很好的风格。

那么，同事们有什么想法？欢迎任何jQuery，CSS3或HTML5。

UPD：我提到它很小心，但大多数答案建议切换按钮的整个背景。注：我使用浏览器样式的按钮，我只是尝试使用16x16图标代替文本标签。

Answer 1

最合适的解决办法是使用HTML5 <button>...</button>代替<input type=button value=""/>

HTML：

<button type="button" id="control-play" title="Play"><span></span></button> 

CSS：

button#control-play {width: 50px; height: 49px;} 
button#control-play span {display: inline-block; background: url('../i/ruler/play.png') no-repeat;} 

有不需要精灵，3个模仿标准浏览器的背景按钮的机会。每个人都会以最喜欢的风格使用这些按钮（即使是使用皮肤浏览器），只有我的图标才是永久的。

通过Pointy的评论。

Answer 2

<div class="button"> 
//height and width of this DIV should be same as `input[button]` 
    <input type="button" /> 
</div> 

<style> 
.button{ 
    background: url("your_normal_image.jpg") no-repeat 0 0; 
    height: 123px; 
    width: 123px; 
    } 
.button:hover, .button.some_class{ 
    background: url("your_hover_image.jpg") no-repeat 0 0; 
    } 
.button input[type="button"]{ 
    opacity: 0;} 

</style> 

而点击事件添加.some_class与使用jQuery .button - 代码看起来像

<div class="button some_class"> 
    //toggle between ".some_class" 

     <input type="button" /> 
    </div> 

另一种方式 - 玩风格background-position:而不是使用图片组合方法

要加入.someclass类知道更多：看看Image spriting文章

Answer 3

如果我理解正确...你想要使用精灵。精灵是背景图像，在一张图像中同时拥有Hover BG和Standard BG。在这种情况下，这两个16像素x 16像素图像将在一个图像文件中，总宽度为32像素x 16像素;

然后，您可以使用CSS切换背景位置，只需使用CSS创建平滑悬停效果。

#control-play span 
{ 
    background-image: url('../i/ruler/play.png'); 
    width:16px; 
    height:16px; 
    background-position: 16px 0px; 
} 

#control-play span:hover 
{ 
    background-position: -16px 0px; 
} 

Answer 4

我想说的最语义的方法是有：

HTML：

<input type="button" class="button" value="Submit" />

OR

<button type="submit" class="button">Submit</button>

CSS：

.button { 
display: block; 
width: 16px; 
height: 16px; 
background: url('../i/ruler/play.png') top left; 
border: 0; 
} 

.button:hover { 
background-position: bottom; 
cursor: pointer; 
} 

这样，你不必依靠任何JavaScript语言（Javascript也被关闭..）

Answer 5

你有工作得非常好
注3个CSS操作： ！重要将迫使背景给予这部分更高的优先级

<style> 
.button{ 
    background: url("background.png") no-repeat 0 0; 
    height: 123px; 
    width: 123px; 
    border:0; // this part is important otherwise it leaves the borders 
    } 
.button:hover{ 
    background: url("background.png") no-repeat -123px 0 !important ; 
    } //moves the bg image up 
.button:active{ 
    background: url("background.png") no-repeat -246px 0 !important ; 
    } //move the bg up more when yu push the button 
</style> 

为beginers改变你可以使用3个SAPARATE图像至极将导致交运集团在第一悬停或oading延迟点击：

<style> 
.button{ 
    background: url("background.png") no-repeat 0 0; 
    height: 123px; 
    width: 123px; 
    border:0; // this part is important otherwise it leaves the borders 
    } 
.button:hover{background: url("background1.png") no-repeat 0 0 !important;} 
.button:active{background: url("background2.png") no-repeat -246px 0 !important ;} 
</style>