CODEWITHSUNDEEP
cssfirefox4
Cristian Boariu
Cristian Boariu

Reputation: 9621

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.

Upvotes: 1

Views: 2265

Answers (1)

Wayne Austin
Wayne Austin

Reputation: 2989

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

Upvotes: 4

Related Questions