Remove hover underlines from items nested in an anchor element

HTML & CSS
1

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.


<li>
	<a href="#" rel="bookmark" class="post-title">Post Title here. I only want this text to be highlighted and underlined on :hover.
		<span class="comment-count">0</span>
		<p class="post-entry">
			<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.
		</p>
	</a>
</li>

Here’s the current css:


a.post-title:hover {color:blue;text-decoration:underline}
a p.post-entry:hover{color:none !important;text-decoration:none !important}
2

This should do it…

a.post-title:hover {color:blue;text-decoration:underline}
a.post-title:hover p {color:#000;text-decoration:none;}

3

Thanks Eric, but I’m still getting underlines on the p elements. Were you able to successfully test this?

4

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”><span class=“hover”>Post Title here. I only want this text to be highlighted and underlined on :hover.</span>
<span class=“comment-count”>0</span>
<span class=“post-entry”>
<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.
</span>
</a>
</li>

</body>
</html>

5

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.

6

@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.

7

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