Remove hover underlines from items nested in an anchor element

**Scott Blanchard** · Dec 8, 2012 11:55

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

Code:

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

**PicnicTutorials** · Dec 8, 2012 12:17

This should do it...

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

**Scott Blanchard** · Dec 8, 2012 13:00

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

**PicnicTutorials** · Dec 8, 2012 13:19

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>

**dresden_phoenix** · Dec 8, 2012 13:31

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.

**Scott Blanchard** · Dec 8, 2012 14:40

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

**PicnicTutorials** · Dec 8, 2012 14:41

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

User Tag List

Thread: Remove hover underlines from items nested in an anchor element

Thread Tools

Display

Remove hover underlines from items nested in an anchor element

Bookmarks

Bookmarks

Posting Permissions