Originally published at jeremyjarratt.com. You can comment here or there.
[EDIT: this site no longer supports the features described in this article. Sorry.]
You may have noticed in my sidebar that there are a few elements which are nested in an obvious hierarchical order. For example, at the time of this writing, i have a list of books which i am either reading, planning to read, or have already read, listed under the “now reading” heading.
You may also have noticed that the heading for each of these menu items is highlighted whenever you hover your cursor (pointer) over it.
What you may not have noticed is that the headings for these items’ parent elements is also highlighted when its descendant is hovered over. In other words, when you hover over the “planned books,” “current books,” or “recent books” list, the parent element, “now reading,” is highlighted as well.
(If you’re still not sure just what the hell i’m talking about, check out the demo first, and then come back.)
This is a cool trick that you rarely ever see on the internets, and it’s remarkably simple to do. You don’t need no fancy JavaScripting to do it, either! No server- or client-side scripts are used at all, just good old CSS, and a properly nested hierarchy of elements.
First, create a nested list, with headings. For example:
<ol>
<li>
<h1>text</h1>
<h2>more text</h2>
<ol>
<li>
<h3>subtext1</h3>
</li>
<li>
<h3>subtext2</h3>
<ol>
<li>
<h4>subtext2.1</h4>
</li>
<li>
<h4>subtext2.2</h4>
</li>
</ol>
</li>
<li>
<h3>subtext</h3>
</li>
</ol>
</li>
<li>
<h2>text again</h2>
</li>
</ol>
Now create the following style rules:
li:hover>h2, /* matches the H2 element when its parent list-item is hovered over */ li:hover>h3, li:hover>h4, li:hover>h5
{
background: #000;
color: #fed;
}
(Note that the H1 element is not styled and thus does not actually participate in any fancy hover effects.)
Now save your page and test it out. You can adapt this technique to work with just about any set of nested elements. (Just make sure your nest validates!)
