Results 1 to 3 of 3

Thread: Different :hover within same main element?

  1. #1
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default Different :hover within same main element?

    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?
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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.
    Last edited by rangana; 07-26-2008 at 02:48 AM. Reason: Wrong grammar
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

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

    TheJoshMan (07-26-2008)

  4. #3
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    Perfect!

    That works perfectly. Thank you very much. I guess I had my CSS a little "hodge podged"!
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •