我有一段代码无法在 Firefox 中运行。当按钮悬停时,.biểu tượng
图像不会改变。它在 Chrome 中完美运行。
button.add-to-cart-button .button-left .icon {
hiển thị: khối;
vị trí: tuyệt đối;
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 {
hiển thị: khối;
text-indent: -5000px;
tràn: ẩn;
padding-left: 0px !important;/*RW 2px */
width: 35px !important;/*RW 30px */
vị trí: tương đối;
font-size: 11px;
căn chỉnh văn bản: giữa;
border: 0px;
height: 31px;
lề: 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;
hiển thị: khối;
đường viền: không có;
}
JS fiddle : http://jsfiddle.net/dKcdK/14/
您的问题是,如果元素是 cái nút
的子元素,Firefox 不会响应元素的 : di chuột
选择器。参见 https://bugzilla.mozilla.org/show_bug.cgi?id=843003 .
您可以通过将 : di chuột
附加到 cái nút
来简化您的 CSS:
button.add-to-cart-button .button-left .icon {
hiển thị: khối;
vị trí: tuyệt đối;
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 {
hiển thị: khối;
text-indent: -5000px;
tràn: ẩn;
padding-left: 0px !important;/*RW 2px */
width: 35px !important;/*RW 30px */
vị trí: tương đối;
font-size: 11px;
căn chỉnh văn bản: giữa;
border: 0px;
height: 31px;
lề: 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;
hiển thị: khối;
đường viền: không có;
}
Tôi là một lập trình viên xuất sắc, rất giỏi!