跨度：悬停在Firefox中不起作用，但在Chrome中起作用 [英] span:hover isn't working in Firefox but works in Chrome

问题描述

我有一段代码，我没有在Firefox中工作。当按钮悬停时， .icon 图片不会改变。它能在Chrome中完美地工作。

button.add-to-cart-button .button-left .icon {display：block;位置：绝对; 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;溢出：隐藏; padding-left：0px！important; / * RW 2px * / width：35px！important; / * RW 30px * / position：relative; font-size：11px; text-align：center; border：0px;身高：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％不重复！重要;显示：块; border：none;}

< div class =buttons -ROW> < button class =button main-button add-to-cart-buttontype =submittitle =Add to cart> < span class =button-right> < span class =button-left> < span class =lblid =lbl_add_to_cartonmouseover =javascript：lmo（this，event）;>添加到购物车< / span> < span class =icon>< / span> < /跨度> < /跨度> < / button>< / div>

JS Fiddle： http://jsfiddle.net/dKcdK/14/

解决方案

您的问题是，Firefox不响应：hover 选择器元素，如果它是按钮的子元素。请参阅 https://bugzilla.mozilla.org/show_bug.cgi?id=843003
$ b

通过将：hover 附加到按钮上，可以简化CSS。 code>改为：



< div class =buttons -ROW> < button class =button main-button add-to-cart-buttontype =submittitle =Add to cart> < span class =button-right> < span class =button-left> < span class =lblid =lbl_add_to_cart>加入购物车< / span> < span class =icon>< / span> < /跨度> < /跨度> < / button>< / div>

I have a piece of code that I doesn't work in Firefox. The .icon image does not change when the button is hovered. It works perfectly in 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 class="buttons-row">
  <button class="button main-button add-to-cart-button" type="submit" title="Add to cart">
    <span class="button-right">
      <span class="button-left">
        <span class="lbl" id="lbl_add_to_cart" onmouseover="javascript: lmo(this, event);">Add to cart</span>
        <span class="icon"></span>
      </span>
    </span>
  </button>
</div>

JS Fiddle: http://jsfiddle.net/dKcdK/14/

解决方案

Your issue is that Firefox does not respond to the :hover selector of an element if it is a child of a button. See https://bugzilla.mozilla.org/show_bug.cgi?id=843003.

You can simplify your CSS by attaching :hover to the button instead:

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 class="buttons-row">
  <button class="button main-button add-to-cart-button" type="submit" title="Add to cart">
    <span class="button-right">
      <span class="button-left">
        <span class="lbl" id="lbl_add_to_cart">Add to cart</span>
        <span class="icon"></span>
      </span>
    </span>
  </button>
</div>

这篇关于跨度：悬停在Firefox中不起作用，但在Chrome中起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！