hover over div tag (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

seth -> hover over div tag (8/1/2007 18:36:38)

Hi i have a div with a class called "beenThere"
I trying to set a style for the class, and also set a different style for a hover effect, this is what i have so far, any suggestions, thanks!

in the css i have:

.beenThere {
OVERFLOW: visible;
cursor:hand;
}

.beenThere.a:link:hover, a:visited:hover {text-decoration: underline; color: red; background: yellow}



Tailslide -> RE: hover over div tag (8/2/2007 3:42:52)

This is easy peasy for modern browsers (even IE7 can manage it!) but IE6 and under will only do hover effects on links. But there's a way around it with a little scripting help.

Had a bit of time this morning so put a test together for you:

http://www.littleblueplane.com/test/hoverdivtest.html

This includes the normal markup and CSS which will give the div a hover effect in all modern browsers plus IE7. It also includes a conditional comment which feeds a script known as whatever:hover to IE6 and under.

You can get the most up to date version of the csshover.htc script here: http://www.xs4all.nl/~peterned/csshover.html

Anyway - what it amounts to for the modern browsers is this: 

.hoverdiv:hover {background-color:pink;}


Then again you don't have to bother adding all the IE6 < stuff if you don't fancy.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875