hover on div does work in Firefox

问题

I have this code:

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

With css:

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

}

and

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

}

I cannot figure out why on Firefox and IE, hovering on that div does not change the background image.... But on Chrome it works perfectly.

Can you please give me a helping hand?

Thanks.

回答1:

Try giving the :hover style rule more specificity over its normal state, so:

.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');
}

which will over write the original style rule

来源：https://stackoverflow.com/questions/6225969/hover-on-div-does-work-in-firefox