CSS Link hover not for images

Question

I have a scenario where I want to have the text links with border-bottom, and set-up the css like this

a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}

The problem is that the images that are wrapped in links also have this border-bottom, eg.

<a href="home">
  <img src="logo.jpg" alt="Logo" class="logo-img">
</a>

How can I target the a:hover that it is only for text links? Pure CSS would be preferable.

Answer 1

No problem.

Add a class to your text links. Then target those links like this.

a.testing:hover {
  color: #492512;
  border-bottom: 2px dashed #94705A;
}

<a href="home">
  <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=bc7c2f3904bf" alt="Logo" class="logo-img">
</a>

<a class="testing" href="home">
  TESTING
</a>

Hope this helps.

---

Added with EDIT

Here is Another Option

a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}

a[href*='ignorethis']  {
	text-decoration: none !important;
	border-bottom: 0 none !important;
}

<a href="http://www.milk.com?ignorethis">
  <img src="http://s.w.org/style/images/wp-header-logo.png" alt="Logo" class="logo-img">
</a>


<a href="http://www.milk.com">
  TESTED
</a>

This achieves the same thing by targeting target all anchors whose href attribute contains the given value ('ignore this'). Other ways this can be used.

attribute *= contains value

attribute ^= begins with value

attribute $= ends with value

To use this just append '#special-test-value' to the end of the link or in the case of a targeted link append '?special-test-value=0' or in the case where the query string already exists use '&special-test-value=0'

I thought this was an interesting way to target links and that it might be new to a lot of people.

---

Another use case

If the case is that a single url or a specific set of urls you could use them to end target them and exclude the anchored images that way.

a[href$='somedomain.com/url1/'],  a[href$='somedomain.com/url2/'], a[href$='somedomain.com/url.../'], a[href$='somedomain.com/urlN/']  {
    text-decoration: none !important;
    border-bottom: 0 none !important;
}

OK that's it have a great night.

Answer 2

Two ways, either wrap the text in a span (below sample) or set a unique class to links with text only.

a {
  text-decoration: none;
}
a:hover {
  color: #492512;
}
a:hover :not(img) {
  border-bottom: 2px dashed #94705A;
}

<a href="home">
  <img src="http://placehold.it/50/100/" alt="Logo" class="logo-img" />
</a>

<br>
<br>

<a href="home">
  <span>Text</span>
</a>