I have recently made the committment to wrap my head around CSS. In other words, I'm tired of guessing. Part of this experience will have me documenting my discoveries on this blog.
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.
0 comments:
Post a Comment