Exclude one hyperlink from a:hover style

ataxia1 · 04-24-2009, 12:43 PM

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

jthayne · 04-24-2009, 03:05 PM

Quote:

Originally Posted by ataxia1

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.

ataxia1 · 04-26-2009, 07:44 PM

Worked perfectly.

Thanks!

wcipolli · 06-23-2009, 07:33 AM

sorry

04-24-2009, 12:43 PM	#1
ataxia1 New Member Join Date: Apr 2009 Webmaster Discussions: 2 Rep Power: 9	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

04-26-2009, 07:44 PM	#3
ataxia1 New Member Join Date: Apr 2009 Webmaster Discussions: 2 Rep Power: 9	Re: Exclude one hyperlink from a:hover style Worked perfectly. Thanks!

06-23-2009, 07:33 AM	#4
wcipolli Junior Member Join Date: Jun 2009 Webmaster Discussions: 28 Rep Power: 8	Re: Exclude one hyperlink from a:hover style sorry Last edited by wcipolli; 06-23-2009 at 07:36 AM. Reason: wrong thread

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread:

Similar Webmaster Discussions
Thread	Webmaster Discussion Starter	Forum	Replies	Last Post
can't get a:hover to work in IE6	herbie04	CSS Forum	2	05-25-2007 04:13 AM
Hover command on a td	hbass	CSS Forum	3	01-19-2006 06:04 PM
CSS Print (exclude menu) HELP	aideenm	CSS Forum	4	07-14-2004 07:14 AM
Help with an inline a:hover	wconti	CSS Forum	1	03-12-2003 11:28 PM
Hover text	Tuk	Website Scripts Forum	1	06-03-2002 05:34 AM