span:hover 在 Firefox 中不起作用，但在 Chrome 中起作用答案

【问题标题】：span:hover isn't working in Firefox but works in Chromespan:hover 在 Firefox 中不起作用，但在 Chrome 中起作用
【发布时间】：2015-07-29 15:48:11
【问题描述】：

我有一段不能在 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 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 小提琴： http://jsfiddle.net/dKcdK/14/

【问题讨论】：

与您的问题无关，但您不需要在事件处理程序上使用 javascript: 前缀......它会起作用，但不是必需的。该前缀适用于您想在 <a href="..."> 属性中使用 javascript

标签： html css google-chrome firefox hover

【解决方案1】：

我有这个适用于 chrome 和 firefox 的解决方案。为什么不尝试使用FontAwesome 而不是将该购物车图标作为图像。您可以查看我的JS Fiddle 进行演示。希望这可以帮助。快乐编码。

CSS：

button{
   width: 100px;
    height: 100px;
    color: #000;
}

button:hover{
    color: red;
}

您还可以将自定义悬停 CSS 放在 button:hover

【讨论】：

【解决方案2】：

您的问题是，如果元素是 button 的子元素，Firefox 不会响应该元素的 :hover 选择器。见https://bugzilla.mozilla.org/show_bug.cgi?id=843003。

您可以通过将:hover 附加到button 来简化您的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 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>

【讨论】：