:hover pseudo-class of CSS does not work in IE7

Question

Hi guys

I have problem with the :hover pseudo-class of CSS.

I am using it like

tr.lightRow:hover {
    color:red
} 

It works in Safari and Firefox but it does not work in IE7. Please help me.

Answer 1

IE7 supports :hover, at least in standards mode. It may not in quirks mode.

Answer 2

:hover is not supported by every element e.g. it works on <a> but breaks on <div> afaik

Answer 3

IE has a history of bad CSS support. Originally only a tags supported :hover. And also you couldn't have something like a:hover span to indicate that only the span tag should change when hovering the parent a.

If you want correct :hover functionality across all IE versions, you need to use javascript and onmouseover/onmouseout.

It also helps if you use an xhtml doctype, to enable standards mode.

Answer 4

I've run into this a few times - have a look at the following link ..

http://www.bernzilla.com/item.php?id=762

"if you want support for :hover on all elements and not just the <a> tag, make sure you're using a strict DOCTYPE so IE7 doesn't kick in to quirks mode."

Answer 5

IE 6 only supports the :hover pseudo class on links, but IE 7 supports it on most elements.

As David mentioned, it might not work in quirks mode. The reason would then be that IE mostly reverts back to something closer to IE 4 in quirks mode, allowing a lot of IE specific features and removing several standards compliant features.

If you want the :hover functionality on a block element and support back to IE 6, you can use a link element and make it a block element using CSS. Note that a link only can contain inline elements (e.g. no divs) so if you want block elements inside the link you would have to set that using CSS also:

CSS:

.hoverlink { display: block; }
.hoverlink:hover { background: #eee; }
.hoverlink .item { display: block; }

HTML:

<a href="..." class="hoverlink">
  <span class="item">Line 1</span>
  <span class="item">Line 2</span>
  <span class="item">Line 3</span>
</a>

(You might want to consider the impact on search engines using the technique also. A link has better impact if it just contains the text describing what it links to.)