span:hover 在 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;
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/
我有一个适用于 chrome 和 firefox 的解决方案。为什么不尝试使用 FontAwesome instead of making that cart icon as image. You can see my JS Fiddle 进行演示。希望这可以帮助。快乐编码。
CSS:
button{
width: 100px;
height: 100px;
color: #000;
}
button:hover{
color: red;
}
您也可以将自定义悬停 CSS 放在 button:hover
上
您的问题是如果元素是 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>
我有一段代码无法在 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 Fiddle: http://jsfiddle.net/dKcdK/14/
我有一个适用于 chrome 和 firefox 的解决方案。为什么不尝试使用 FontAwesome instead of making that cart icon as image. You can see my JS Fiddle 进行演示。希望这可以帮助。快乐编码。
CSS:
button{
width: 100px;
height: 100px;
color: #000;
}
button:hover{
color: red;
}
您也可以将自定义悬停 CSS 放在 button:hover
您的问题是如果元素是 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>