CODEWITHSUNDEEP
htmlcss
MAX POWER
MAX POWER

Reputation: 5448

CSS hyperlink style for text only links

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.

<a href="contact.html">Contact Us</a>

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.

Upvotes: 2

Views: 6174

Answers (7)

lixitrixi
lixitrixi

Reputation: 21

Definitely digging up an old post, but in the event anyone else comes here searching for insight...

DISCLAIMER: The :has selector is disabled by default on Firefox version 103. Check the compatibility before trying this yourself.

EDIT: This is now fully supported on all modern browsers as of Firefox version 121.

This can be done with the :has and :not selectors:

a:not(:has(> *)) {
    color: #1F497D;
    text-decoration: none;
}

With :has(> *), we are selecting items that have selectable children (not text nodes). In the context of hyperlinks this will usually mean it's a non-text-only link which contains some other elements (images in your case). By wrapping it in a :not() selector we select only text links.

To add hovering styles:

a:not(:has(> *)):hover {
    color: #FFFFFF;
    background-color: #1F497D;
}

Upvotes: 1

Jack
Jack

Reputation: 9388

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/

Upvotes: 2

DigiDuncan
DigiDuncan

Reputation: 129

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;
}

Upvotes: 0

Michael G
Michael G

Reputation: 189

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/

Upvotes: 0

Ricki Moore
Ricki Moore

Reputation: 1223

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;
}

Upvotes: -1

user2182349
user2182349

Reputation: 9782

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>

Upvotes: 0

user3998237
user3998237

Reputation:

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>

Upvotes: 2

Related Questions