Remove hover underlines from items nested in an anchor element

Printable View

Dec 8, 2012, 11:55
Scott Blanchard

Remove hover underlines from items nested in an anchor element

In the markup example below, I'm using the anchor element to wrap the contents of the li. This gives me lots of flexibility for rollover effects and a large hit area to activate the link. However, one thing I'm struggling with is how to isolate the text color change and text-decoration hover behaviors so that they do not alter the contents of the "post-entry" paragraph element.

HTML Code:

<li> <a href="#" rel="bookmark" class="post-title">Post Title here. I only want this text to be highlighted and underlined on :hover. 0 <img src="test.png" alt="" /> This is the post description text. I don't want it to respond to the hover css of the "post-title" element. </a> </li>

Here's the current css:

Code:

a.post-title:hover {color:blue;text-decoration:underline} a p.post-entry:hover{color:none !important;text-decoration:none !important}
Dec 8, 2012, 12:17
PicnicTutorials

This should do it...

a.post-title:hover {color:blue;text-decoration:underline}
a.post-title:hover p {color:#000;text-decoration:none;}
Dec 8, 2012, 13:00
Scott Blanchard

Thanks Eric, but I'm still getting underlines on the p elements. Were you able to successfully test this?
Dec 8, 2012, 13:19
PicnicTutorials

This should work. Having a hard time testing this on my ipad. You can't wrap a p in a a so I changed it to a span. No blocks inside anchors.

<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>untitled</title>
<style>
a.post-title {color:blue;text-decoration:none}
a.post-tile:hover .hover {text-decoration:underline}
</style>
</head>

<body>

<li>
<a href="#" rel="bookmark" class="post-title">Post Title here. I only want this text to be highlighted and underlined on :hover.
0

<img src="test.png" alt="" />
This is the post description text. I don't want it to respond to the hover css of the "post-title" element.

</a>
</li>

</body>
</html>
Dec 8, 2012, 13:31
dresden_phoenix

First I would like to point out that your markup is only valid with HTML5. So make sure that is your doc type

Second, by giving the anchor text-decoration:underline you apply that to the element itself. so even if the children have text-decoration-none, the original element will still be underlined. As such my suggestion would be that you remove text decoration from the anchor and give it only to the children with you want underlined. BTW, 'color:none' is not a valid value for the color property. you may want to use rgba(0,0,0,0) or 'transparent'
hope that helps.
Dec 8, 2012, 14:40
Scott Blanchard

@dresden_phoenix, yes doctype is html5. Thanks for the reminder on that though.

Also, appreciate the suggestion re: color:transparent. I just want the color unchanged without having to specify the previous color.
Dec 8, 2012, 14:41
PicnicTutorials

a.post-tile .hover {color:#000}