Here is what I learned today:
Pseudo-classes aren't just for anchors.
That's right. You're supposed to be able to apply standard pseudo-classes to just about any selector you can come up with. This means you don't to rely on a) jQuery or b) onmouseover/onmouseout to do the hover-effect work for you, so long as you can do it all in CSS.
Here is some sample code:
<html>
<head>
<style type="text/css">
/* a class for an element */
span.my_hover_class:hover {
background-color:red;
cursor:pointer;
}
/* attached to nested elements. */
div > div > span > span:hover {
background-color:green;
cursor:pointer;
}
</style>
</head>
<body>
<span class="my_hover_class">Should hover red (span.my_hover_class)</span>
<div>
Should not have hover effect.
<div>
<span><span>Should hover green (div>div>span>span)<span><span>
</div>
</div>
</body>
</html>
I would like to show the effect here, but the Blogger editor insists on tidying up my pasted HTML. I uploaded the file to my website.
This example was tested in Firefox and Safari on a Mac.
No comments:
Post a Comment