IE :hover help

[Geoffrey james]

Hi all,

Im styling a :li element and want to change color when hovered over.
at the moment i have (for example):

CSS
.example li {
background: #FFF;
}

.example li:hover {
background: #000;
}

this works fine exept in IE (as many of you may know) some of the fixes available are confusing me, has anyone got any advice or an easy way to get the hover effect in IE, maybe using mouseover or something.

Thanks for any help.
Geoffb

[Fotiman]

In most cases, you're probably better off applying the hover styles to an <a> element, and making that element a block-level element to fill the <li>.

<ul>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>

Make sure your padding/margins/line-height are set correctly.

<style type="text/css">
li {
display: block;
margin: 0;
border: 1px solid #000;
padding: 0;
line-height: 100%;
}
li a {
display: block;
margin: 0;
padding: 0;
line-height: 100%;
background-color: #fee;
}
li a:hover {
background-color: #eef;
}
</style>

[cmarshall]

Isn't IE the one that only supports :hover in <a> elements?

Even though they are the ones that invented it?

[Geoffrey james]

hi fontiman

this is not what i want to do. i know how to style for a <a> using :hover.

i want to acheive what i set out in top question.

thanks anyway for your help.

geoffb

[DanA]

whatever:hover with its htc file may be an answer
[xs4all.nl...]

[Fotiman]

Well, as mentioned, IE only supports :hover on the <a> element.

If you want to get around this, you need to use IE's proprietary behaviors via a .htc file. The well established method is known as whatever:hover [xs4all.nl] . You'll need to get the csshover.htc file.

[edit]
DanA beat me to it. :)
Also, who's fontiman? ;-)

[edited by: Fotiman at 5:34 pm (utc) on Feb. 2, 2007]

[cmarshall]

Hmm... If you are going to use JScript anyway (the reason I use :hover is to avoid relying on JavScript), then I would recommend a simpler solution:

Have an onmouseover/onmouseout assigned to the element in question. Have these switch the element classnames.

I've done that scads of times, and it works quite well.

[SuzyUK]

cmarshall

:hover

can only be applied to <a> elements in IE6 and below
it can be applied to all elements in compliant browsers including IE7

the beauty of the hover behaviour file (which would be my preferred method too btw) is that no switching, or indeed addition, of classes need to be made, therefore no extra CSS.

You can also just make sure the hover file is only used by IE6 and below - therefore the code is essentially clean and forward compatible, or how it should be;)) - the CSS can be coded for all brwsers as it should be, i.e

li:hover {rules}

whereas if you filck classes you need extra rules to cover those extra classes -

Yes it needs JS switched on to work, but you just upload it beside your CSS call it from an IE6 stylesheet and carry on as normal, no need to worry about classes, mouseover or embedding scripts into pages - you can use said hover behaviour on any element sitewide

[cmarshall]

Yes it needs JS switched on to work, but you just upload it beside your CSS call it from an IE6 stylesheet and carry on as normal, no need to worry about classes, mouseover or embedding scripts into pages - you can use said hover behaviour on any element sitewide

Makes sense to me. I understand. Thanks for the clarification. I would still consider the jury to be out as to which method would result in more complexity and maintenance headaches. I have always found that maintaining code after it has been written has been one of my more acute headaches.

[cmarshall]

SuzyUK: You would know this. How about warping an <a> into a block element? Many elements can be contained therein. I suspect not as many as in a <div>, but, I'm sure, plenty.

An <a> display:block could work well? Yes? No?

[SuzyUK]

ahh no problems :) I realise some prefer to work with their javascript within the sphere of what they know.

As I'm no JS expert, I prefer the (to me) simpler CSS route, because to me the beauty of a behavior file is that there is NO maintenance! - plug'n'play hehe

Geoff, is this an option or would you prefer a mouseover script? sorry not meaning to take over your thread here..

[SuzyUK]

An <a> display:block could work well? Yes? No?

technically Yes, but I suspect from the OP that there is no <a>nchor involved in this scenario so adding one just to make the effect would be non-semantic, unnecessary, unwise, naughty.. ;)

No, you cannot wrap an <a>nchor around block elements, it can only contain inline elements - so it only works (making <a> display: block; that is..) if there is already an anchor inside the element you wish to target - (many simple vertical menus use the technique)

Geoff perhaps wants a rollover effect on a simple <li> element which contains text, and why not the facility is there in CSS now, we're just left support the legacy of IE6 and below - Mostly you see it used on <hn> elements to see #bookmark information or on a table cell to highlight information.

edit: clarified that <a> elements can only contain inline elements - didn't quite read question properly

[edited by: SuzyUK at 6:57 pm (utc) on Feb. 2, 2007]

[Geoffrey james]

thanks all for a great discusion and some clarification on this issue.

SuzyUK (im from Liverpool btw)

I think I would prefer the .htc file way, I have tried to get that in and working but must be going slightly wrong somewhere.

Any help would be appreciated greatly!

geoffb