html – span：hover在Firefox中不起作用但在Chrome中有效

概述我有一段代码,我在Firefox中不起作用.按钮悬停时.icon图像不会改变.它在Chrome中完美运行. button.add-to-cart-button .button-left .icon { display: block; position: absolute; left: 0;/*RW 6px; */ top: 0;/*RW 6px; */ width: 35px 我有一段代码,我在firefox中不起作用.按钮悬停时.icon图像不会改变.它在Chrome中完美运行.

button.add-to-cart-button .button-left .icon {  display: block;  position: absolute;  left: 0;/*RW 6px; */  top: 0;/*RW  6px; */  wIDth: 35px;/*RW 21px; */  height: 31px;/*RW 19px; */  background: url(http://clIEnt4.bostonwebco.com/skin/IDeal_responsive/images/custom/add_to_cart.gif) 50% 50% no-repeat;}button.add-to-cart-button .button-left {  display: block;  text-indent: -5000px;  overflow: hIDden;  padding-left: 0px !important;/*RW  2px  */  wIDth: 35px !important;/*RW  30px  */  position: relative;  Font-size: 11px;  text-align: center;  border: 0px;  height: 31px;  margin: 0px;}button.add-to-cart-button:hover span.button-left:hover span.icon:hover {  background: url("http://clIEnt4.bostonwebco.com/skin/IDeal_responsive/images/custom/add_to_cart-over.gif") 50% 50% no-repeat !important;  display: block;  border: none;}

<div >  <button  type="submit" title="Add to cart">    <span >      <span >        <span  ID="lbl_add_to_cart" onmouSEOver="JavaScript: lmo(this,event);">Add to cart</span>        <span ></span>      </span>    </span>  </button></div>

Js小提琴：http://jsfiddle.net/dKcdK/14/

解决方法 您的问题是firefox不响应元素的悬停选择器(如果它是按钮的子节点).见 https://bugzilla.mozilla.org/show_bug.cgi?id=843003.

您可以通过附加简化CSS：将鼠标悬停在按钮上：

button.add-to-cart-button .button-left .icon {  display: block;  position: absolute;  left: 0;/*RW 6px; */  top: 0;/*RW  6px; */  wIDth: 35px;/*RW 21px; */  height: 31px;/*RW 19px; */  background: url(http://clIEnt4.bostonwebco.com/skin/IDeal_responsive/images/custom/add_to_cart.gif) 50% 50% no-repeat;}button.add-to-cart-button .button-left {  display: block;  text-indent: -5000px;  overflow: hIDden;  padding-left: 0px !important;/*RW  2px  */  wIDth: 35px !important;/*RW  30px  */  position: relative;  Font-size: 11px;  text-align: center;  border: 0px;  height: 31px;  margin: 0px;}.add-to-cart-button:hover .icon {  background: url("http://clIEnt4.bostonwebco.com/skin/IDeal_responsive/images/custom/add_to_cart-over.gif") 50% 50% no-repeat !important;  display: block;  border: none;}

<div >  <button  type="submit" title="Add to cart">    <span >      <span >        <span  ID="lbl_add_to_cart">Add to cart</span>        <span ></span>      </span>    </span>  </button></div>

总结

以上是内存溢出为你收集整理的html – span：hover在Firefox中不起作用但在Chrome中有效全部内容，希望文章能够帮你解决html – span：hover在Firefox中不起作用但在Chrome中有效所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。