CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1016403
user1016403

Reputation: 12621

mouse hover is not working in IE7?

I have below HTML code. 

<input type="button" class="myButton" value="Text"></input>

CSS

input.myButton{
    background: url("../images/button.png") no-repeat top left;
    height: 21px;
    cursor: pointer;
    width: 78px;
    text-align: center;
    color: #696969;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    border: medium none white;
}
input.myButton:hover{
   background: url("../images/button-active.png") no-repeat top left;
   color: #FFFAF0;
}

But mouse hover is not working in IE7. I would like to change the image :hover.

How can i do this? it works fine in FireFox browser.

Thanks!

Upvotes: 0

Views: 138

Answers (4)

Matthew R.
Matthew R.

Reputation: 4350

The specification for IE7 is that the :hover pseudo class will only work on the a tag. You can get around this by using a polyfill. I would highly recommend Selectivizr. It allows you to use most pseudo classes on older, or unsupported, browsers.

Upvotes: 0

Max Malyk
Max Malyk

Reputation: 860

In IE there must be declared a <!DOCTYPE> for the :hover selector to work on other elements than the <a> element, here: http://www.w3schools.com/cssref/sel_hover.asp

Upvotes: 0

Najam Awan
Najam Awan

Reputation: 1145

you better use jquery because css hover support in IE varies from version to version

Upvotes: 0

Halcyon
Halcyon

Reputation: 57719

I think IE7 is so old hover doesn't work on anything but a. I remember this used to be a problem in IE.

You can write a workaround that uses an onmouseover/out listener that sets a class.

Upvotes: 4

Related Questions