CSS hyperlink style for text only links - html

Question

On my website I have a global CSS rule for hyperlinks:
a {
color: #1F497D;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
background-color: #1F497D;
}
This works well for text-only hyperlinks - the link gets a background colour applied to it on hover.
Contact Us
However this is causing issues with other link types, for example:
<a href="image.png">
<img src="thumb.png" alt="" />
</a>
In the above example, the image is a transparent PNG, therefore the background colour applied by the a:hover rule can be seen on hover.
Is there any way we can adjust the global CSS rule so that it only applies to text links? I know I can add a separate class for these links but as there are so many I would prefer an easier solution.

Answer 1

You could create a class to anchor tags that are not texts:
a.not-a-text:hover {
background-color: transparent;
}
Them in the HTML:
<a class="not-a-text" href="image.png">
<img src="thumb.png" alt="" />
</a>

Answer 2

Since you asked for an "easier" solution (rather than adding classes), you could apply a style using an attribute selector (where a elements have an href attribute that end with a png extension) to have a transparent background.
Something like this:
a[href$=".png"]:hover{
background-color: transparent;
}
Here's a fiddle (has a red hover which you could set to transparent):
http://jsfiddle.net/sb6xvztm/

Answer 3

You should use CSS classes on the links instead of tags because it will make maintenance much easier.
.text-link {
color: #1f497d;
text-decoration: none;
}
.text-link:hover {
color: #FFFFFF;
background-color: #1F497D;
}
<a class="text-link" href="contact.html">Contact</a>
<a class="img-link"><img src="someimage.jpg" alt="alt"></a>

Answer 4

If you are not against your site running jQuery I suggest this SIMPLE solution:
jQuery('a').hover(function(){
jQuery(this).has('img').css('background', 'none');
});
Working Example Here http://jsfiddle.net/a9h9wbnv/

Answer 5

I would definitely use a new class. Then, just use any decent text editor (like Notepad++) to find and replace:
FIND: <a href="*"> <img
REPLACE: <a class="image-link" href="*"> <img
And in your CSS:
a.image-link:hover {
background-color: transparent;
}

Answer 6

So you want only the text hyperlink to have the hover?
If so, you can simply give the the 'Contact Us' a different class name or a specific ID.
<a href="image.png">
<img src="thumb.png" alt="" />
</a>
<a id = "contact" href="contact.html">Contact Us</a>
a {
color: #1F497D;
text-decoration: none;
}
#contact:hover {
color: #FFFFFF;
background-color: #1F497D;
}