Different :hover within same main element?

**TheJoshMan** · 07-26-2008, 02:16 AM

Ok, so I'm trying to make a "word" where when you hover over it (the link) it changes colors... EASY. However, within the link is a <sup> tag, I want what's inside the <sup> tag to rollover to a different color than the rest when hovered on... I can't seem to figure this one out.

Here's my code:

Code:

<HTML>
 <HEAD>
  <TITLE> SUP Rollover? </TITLE>

  <style type="text/css">
  body{
  background:#353535;
  }
  .top a, .top a:link, .top a:active, .top a:visited{
  font-family:verdana;
  font-size:1em;
  font-weight:normal;
  text-decoration:none;
  color:#f9f9f9;
  }
  .top a:hover{
  color:#a4c634;
  font-family:verdana;
  font-size:1em;
  font-weight:normal;
  text-decoration:none;
  }
  .top sup, .top sup a:link, .top sup a:active, .top sup a:visited{
  color:#a4c634;
  font-family:verdana;
  font-size:1em;
  font-weight:normal;
  text-decoration:none;
  }
  .top sup a:hover{
  color:#f9f9f9;
  font-family:verdana;
  font-size:1em;
  font-weight:normal;
  text-decoration:none;
  }
  </style>
 </HEAD>

 <BODY>
  <div class="top">
  <a href="#"><h2>Eight<sup>7</sup>Teen</h2></a>
  </div>
 </BODY>
</HTML>

As you can see the "main" body of the link is #f9f9f9 upon normal state, then changes to #a4c634 upon ":hover" state. Now, the link itself is:
Eight7Teen
with the number "7" being inside the <sup> tag. I want the "7" to be #a4c634 upon normal state, and #f9f9f9 upon rollover state.

Is this possible within ONE single anchor element?

**rangana** · 07-26-2008, 02:33 AM

Change highlighted:

Code:

.top sup a:hover{
  color:#f9f9f9;
  font-family:verdana;
  font-size:1em;
  font-weight:normal;
  text-decoration:none;
  }

to .top a:hover sup

Sidenote, highlighted does'nt makes sense

Code:

.top sup, .top sup a:link, .top sup a:active, .top sup a:visited{

<a> element is the parent of <sup> element. So, should be:

Code:

.top a:link sup
.top a:active sup
.top a:visited sup

Repectively base on the highlighted.
Hope it helps.

**TheJoshMan** · 07-26-2008, 02:45 AM

Perfect!

That works perfectly. Thank you very much. I guess I had my CSS a little "hodge podged"!

Thread: Different :hover within same main element?

Thread Tools

Search Thread

Different :hover within same main element?

The Following User Says Thank You to rangana For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions