Chris Curtis dot Org

This :CSS: trick is pretty simple to implement, but it’s difficult to describe.  First, what I’m talking about: if you use a good browser (in other words, not Internet Explorer) when you move your mouse over this entry area/box, you should see any links in this text change appearance.  In particular, the links get slightly lighter and gain an underlining on my site.  It’s simply a subtle decorational type effect.

The reason you can do this is because the CSS 2 specification doesn’t limit the “hover” effect to only links; instead, pretty much any HTML element can have a hover effect applied to it.  (:IE:, naturally, doesn’t support this because it’s dumb.) Here is a very basic version to change how a link looks when you hover over a paragraph (<p>):

p:hover a {
   color: #77c;
   text-decoration: underline;
   }

If you just used that code by itself, though, it would affect any links you have in any paragraph on your site.  Most people wouldn’t want that, so you need to restrict it some.  Continue on to find out more details.

In my case, the weblog entries are always enclosed in an element that uses the “content” CSS class.  So, I can use that specific class to help limit how the style is applied:

.content:hover p a {
   color: #77c;
   text-decoration: underline;
   }

You can see that I moved the “hover” trigger away from the paragraph tag and onto the enclosing CSS class.  This way, the effect will occur if you hover over anywhere within the entry, not just directly over a paragraph.  When I first implemented that, I noticed that it worked well, but that any links I had in my blockquotes didn’t get affected.  So simply add a similar definition for blockquotes in addition to paragraphs:

.content:hover p a,
.content:hover blockquote a {
   color: #77c;
   text-decoration: underline;
   }

Okay, we’re almost there.  If you’ve followed along so far and actually tried it yourself, then you’ll notice something that you probably didn’t expect: while the links now look different when hovering over the entry, if you then hover over the link itself it won’t change to any regular link hover style you have defined.  So what we need to do is add in a definition that will switch back to your “regular” styling if you’re hovering over the entry but also directly hovering over a regular link.

.content:hover p a,
.content:hover blockquote a {
   color: #77c;
   text-decoration: underline;
   }

.content:hover p :link:hover,
.content:hover p :visited:hover,
.content:hover blockquote :link:hover,
.content:hover blockquote :visited:hover {
   color: #33c;
   text-decoration: none;
   }

Now, this second style definition is the tough one to explain.  The two styles in the second definition are my “regular/default” styles for links, so the definition applies those same styles if you are hovering over the enclosing CSS class ("content") and also hovering over either a regular (:link:hover) or visited (:visited:hover) link in a paragraph or a blockquote.

Whew, that’s kind of tough to explain; hopefully you understand at least the basic concept.

Posted Friday February 20, 2004 in CSS Tricks by Chris Curtis

This is an older entry and as such, it may be by a guest author or contain formatting problems / extraneous code. If you notice something wrong with the entry, please use the Contact page to let me know the entry title and issue.