Class:hover ??

[rico14d]

Is there any way I can effectively add :hover to a class as I would do for a:hover using CSS only?

.myclass
{
FONT-SIZE: 9pt;
COLOR: navy;
FONT-FAMILY: Verdana;
}

.myclass:hover
{
font-weight:bold;
}

Thanks.
Rich

 

[starway]

Look at this:

http://www.meyerweb.com/eric/css/edge/popups/demo.html

 

[BlueMango]

The :hover psuedo-selector only works with links and such at this point with the browsers I know of. However, here's a workaround for this:

-wrap everything you want to be .myclass in <a href=&quot;#&quot; class=&quot;myclass&quot;></a>. This will make it a link (and thus :hover will work), but it won't take you anywhere if you click on it. (although it might reload..)
-make a style definition for .myclass which turns off underlining, and makes the color the same as your normal text

      eg: .myclass { text-decoration:none; color:#000 }

-make another sytle definition for .myclass:hover which sets your desired hover effects

      eg: .myclass:hover { font-weight:bold }

Hope this solves your problem!

 

[BlueMango]

oh, you might also want to add something so that the focus box doesn't appear around your words if someone clicks on it (that little dotted-line border).
umm... not sure right now how you could do this. border:none doesn't seem to have an effect.

--one side effect of this method by the way, is that highlighting with the mouse works kinda wierd (different than normal text)