javascript - 图像作为 <input type ="button"/> 的值

Question

在默认浏览器样式上发布了control-buttnos接口(interface)。我尝试使用标准按钮 () 并将图像作为值

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;}

但是，当光标悬停在图像上时，我当然遇到了 :hover 事件的问题:

在JS中我可以通过捕获图像的onClick来激活点击:

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

但是我无法对 onHover 事件执行此操作。

如你所见，我不模仿 :hover {} 和 :active() 样式，我使用默认样式。我可以抓取图像并将它们用作背景，但这似乎不是一个好的风格技巧。

那么，各位同事，有什么想法吗？欢迎任何 jQuery、CSS3 或 HTML5。

UPD:我仔细提到了这一点，但大多数答案都建议切换按钮的整个背景。注意:我使用具有浏览器样式的按钮，我只是尝试使用 16x16 图标而不是文本标签。

Answer 1

<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>

对于点击事件，使用 Jquery 添加 .some_class 和 .button - 代码将如下所示

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

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

另一种方法是 - 使用样式 background-position: 进行播放，而不是使用图像 Sprite 方法添加类 .someclass

了解更多:查看Image spriting文章