将鼠标悬停在 div 上确实适用于 Firefox答案

【问题标题】：hover on div does work in Firefox将鼠标悬停在 div 上确实适用于 Firefox
【发布时间】：2011-06-03 10:35:38
【问题描述】：

我有这个代码：

<div title="" class="icePnlGrp graButtonActionDiv graButtonBackgroundOn">
       <label id="j_id89:j_id99" class="iceOutLbl graButtonActionLabel">Select</label>
</div>

使用 css：

.graButtonBackgroundOn {
line-height: 45px;
background:
    url('/resources/images/external/button_generic_on_txmart.png');

}

和

.graButtonBackgroundOn:hover{
background:
    url('/resources/images/external/button_generic_on_txmart-hover.png');

}

我不知道为什么在 Firefox 和 IE 上，将鼠标悬停在该 div 上不会改变背景图像....但在 Chrome 上它可以完美运行。

你能帮帮我吗？

谢谢。

【问题讨论】：

IE和Firefox是否支持。
它的工作可能是有一个图像路径问题

标签： css firefox4

【解决方案1】：

尝试让 :hover 样式规则比其正常状态更具特异性，所以：

.graButtonBackgroundOn {
line-height: 45px;
background:
    url('/resources/images/external/button_generic_on_txmart.png');
}
div.graButtonBackgroundOn:hover{
background:
    url('/resources/images/external/button_generic_on_txmart-hover.png');
}

这将覆盖原来的样式规则

【讨论】：

简直令人难以置信...您的解决方案有效...很奇怪，因为：jsfiddle.net/DnUXF/1，它使用我的初始帖子和一些随机图像，也适用于 FF..