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

Question

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.

you may want to post some example code – Tor Valamo Jan 16 '10 at 13:12 — Tor Valamo, Jan 16 '10 at 13:12
What are you applying `:hover` to? – Sampson Jan 16 '10 at 13:20 — Sampson, Jan 16 '10 at 13:20
`:hover` is a pseudo-class and not a property. – Gumbo Jan 16 '10 at 13:22 — Gumbo, Jan 16 '10 at 13:22

score 5 · Accepted Answer · answered Jan 16 '10 at 13:12

5

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

answered Jan 16 '10 at 13:12

Quentin

914,110
126
1,211
1,335

how can i activate the standards mode – Tushar Ahirrao Jan 16 '10 at 13:18
1

Add a strict !DOCTYPE to your documents to enable full IE7 goodness – Irongaze.com Apr 25 '13 at 15:54

Tor Valamo · Answer 2 · 2010-01-16T14:13:48.557

4

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.

edited Jan 16 '10 at 14:13

answered Jan 16 '10 at 13:16

Tor Valamo

33,261
11
73
81

Guffa · Answer 3 · 2010-01-16T13:25:52.233

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.)

score 0 · Answer 4 · edited Jan 16 '10 at 13:21

0

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

edited Jan 16 '10 at 13:21

Sampson

265,109
74
539
565

answered Jan 16 '10 at 13:14

antpaw

15,444
11
59
88

score 0 · Answer 5 · answered Jan 16 '10 at 13:17

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."

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

5 Answers5

Linked