61 users online (1 members and 60 guests)  


  Results 1 to 4 of 4

Related

  1. can't get a:hover to work in IE6    Forum: CSS Forum
    Replies: 2
  2. Hover command on a td    Forum: CSS Forum
    Replies: 3
  3. CSS Print (exclude menu) HELP    Forum: CSS Forum
    Replies: 4
  4. Help with an inline a:hover    Forum: CSS Forum
    Replies: 1
  5. Hover text    Forum: Website Scripts Forum
    Replies: 1
  1. #1
    ataxia1's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2009
    Posts
    2

    Question Exclude one hyperlink from a:hover style

    I have an external style sheet which formats my entire site. Part of that sheet removes underlines, except on hover, from hyperlinks. On one particular page, however, I would like to override that part of the style for links within a certain class of cell. Nothing I've tried has worked, but here are a couple excerpts from my most recent attempt.

    EXTERNAL CSS FILE:
    a:link {text-decoration: none; color: #223F7A;}
    a:visited {text-decoration: none; color: #223F7A;}
    a:hover {text-decoration: underline; color: #223F7A;}

    HTML FILE:
    <head>
    <style type="text/css">
    .MyClass {lots of cell formatting CSS here}
    a.MyClass:hover {text-decoration: none;}
    </style>
    </head>
    <body>
    <td class="MyClass">
    <a href="">No underline on hover here</a>
    </td>
    <td class="AnotherClass">
    <a href="">DO underline this link on hover</a>
    </td>
    </body>

    Thanks,

    - Brad

  2. #2
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: Exclude one hyperlink from a:hover style

    Quote Originally Posted by ataxia1 View Post
    EXTERNAL CSS FILE:
    Code:
    a:link {text-decoration: none; color: #223F7A;}
    a:visited {text-decoration: none; color: #223F7A;}
    a:hover {text-decoration: underline; color: #223F7A;}
    HTML FILE:
    HTML Code:
    <head>
        <style type="text/css">
            .MyClass {lots of cell formatting CSS here}
            a.MyClass:hover {text-decoration: none;}
        </style>
    </head>
    <body>
        <td class="MyClass">
           <a href="">No underline on hover here</a>
        </td>
        <td class="AnotherClass">
           <a href="">DO underline this link on hover</a>
        </td>
    </body>
    You are referencing the class wrong. In the HTML, you are applying the class to the table cell, and in the CSS you are referencing it as though you had applied the class to the anchor tag.

    Change your CSS as follows:

    HTML Code:
        <style type="text/css">
            .MyClass {lots of cell formatting CSS here}
            .MyClass a:hover {text-decoration: none;}
        </style>
    That should resolve the issue.

  3. #3
    ataxia1's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2009
    Posts
    2

    Re: Exclude one hyperlink from a:hover style

    Worked perfectly.

    Thanks!

  4. #4
    wcipolli's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2009
    Posts
    28

    Re: Exclude one hyperlink from a:hover style

    sorry
    Last edited by wcipolli; 06-23-2009 at 07:36 AM. Reason: wrong thread



Tags for this Thread