图像为<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中，我可以通过捕获图像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:进行游戏，而不是使用图片精灵方法添加课程.someclass

了解更多信息：查看{ {3}}文章

Answer 2

你有3个css动作很好用     注意：！important 会通过为此部分提供更高优先级来强制更改背景

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

对于初学者，您可以使用3个saparate图像，这将导致第一次悬停或点击时加载延迟：

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

Answer 3

如果我理解正确...你想要使用精灵。精灵是在一张图像中同时具有悬停BG和标准BG的背景图像。在这种情况下，16px x 16px图像将位于一个图像文件中，总宽度为32px x 16px;

然后你可以使用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

最合适的答案是使用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的评论。