Javascript 图像作为<；输入类型="；按钮“/&燃气轮机；

默认浏览器的样式上会发布控件的界面。我尝试使用standart按钮（）将图像作为值

HTML:

但是，当光标悬停在图像上时，我当然会遇到一个问题：hover事件：

在JS中，我可以通过捕捉图像的点击来激活点击：

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

但是对于onHover事件，我不能这样做

如您所见，我不模仿：hover{}和：active（）样式，而是使用默认样式。我可以抓取图像并将其用作背景，但这似乎不是一个好的风格技巧

各位同事，有什么想法吗？欢迎使用jQuery、CSS3或HTML5

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

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

另一种方法是-使用样式

背景位置：

而不是添加类

。someclass

使用图像精灵方法

了解更多信息：查看文章

---

另一种方法是-使用样式

背景位置：

而不是添加类

。someclass

使用图像spriting方法

了解更多信息：如果我理解正确，请查看文章。。。你想使用精灵。精灵是在一个图像中同时具有悬停背景和标准背景的背景图像。在这种情况下，两个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;
}

---

如果我理解正确。。。你想使用精灵。精灵是在一个图像中同时具有悬停背景和标准背景的背景图像。在这种情况下，两个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;
}

---

我认为最具语义的方式是：

HTML:

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

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

或

提交

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也可以关闭）

我认为最具语义的方式是：

HTML:

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

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

或

提交

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也可以被关闭）

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

.按钮{
背景：url（“background.png”）不重复0；
高度：123px；
宽度：123px；
边框：0；//此部分很重要，否则会离开边框
}
.按钮：悬停{
背景：url（“background.png”）不重复-123px 0！重要；
}//向上移动bg映像
.按钮：激活{
背景：url（“background.png”）无重复-246px 0！重要；
}//按下按钮时，将背景向上移动更多

对于beginers，您可以使用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>

.按钮{
背景：url（“background.png”）不重复0；
高度：123px；
宽度：123px；
边框：0；//此部分很重要，否则会离开边框
}
.button:hover{background:url（“background1.png”）不重复0！重要；}
.button:active{background:url（“background2.png”）无重复-246px 0！重要；}

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

.按钮{
背景：url（“background.png”）不重复0；
高度：123px；
宽度：123px；
边框：0；//此部分很重要，否则会离开边框
}
.按钮：悬停{
背景：url（“background.png”）不重复-123px 0！重要；
}//向上移动bg映像
.按钮：激活{
背景：url（“background.png”）无重复-246px 0！重要；
}//按下按钮时，将背景向上移动更多

对于beginers，您可以使用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>

.按钮{
背景：url（“background.png”）不重复0；
高度：123px；
宽度：123px；
边框：0；//此部分很重要，否则会离开边框
}
.button:hover{background:url（“background1.png”）不重复0！重要；}
.button:active{background:url（“background2.png”）无重复-246px 0！重要；}
最合适的答案是使用HTML5
..
而不是

HTML:

不需要精灵，3个背景可以模仿standart浏览器中的按钮。每个人都会以自己喜欢的风格使用这些按钮（甚至使用皮肤作为浏览器），只有我的图标是永久的

Via的评论。
最合适的答案是使用HTML5
..
而不是

HTML:

不需要精灵，3个背景可以模仿standart浏览器中的按钮。每个人都会以自己喜欢的风格使用这些按钮（甚至使用皮肤作为浏览器），只有我的图标是永久的

Via的评论。
如果我理解正确，你能不能不使用背景图像？所以，为什么不使用
标记并在其中添加
标记呢？是的，这是一个明显的、不好的方法，但问题是关于替代方法。尖刻的是，你是唯一一个完全了解HTML5并仔细阅读问题的人：）谢谢！如果你的回答是正确的，我愿意承诺。如果我理解正确，你能不能不使用背景图片？那么，为什么不使用一个
标记，然后在其中放置一个
标记呢？