CODEWITHSUNDEEP
cssimagehover
David Gard
David Gard

Reputation: 12047

Stop CSS 'a' styles being applied to images that are linked

I've been instructed to make links on a website have a different colour underline than the font colour. It all seemed quite easy, using border-bottom as below, except that linked images are now also underlined.

Is there a way, without using JS, to stop happening?

a{
    color: #6A737B;
    text-decoration: none;
}
a:hover{
    border-bottom: 1px solid #C60B46;
    text-decoration: none;
}

An example - hovering over the below image now adds the border-bottom CSS style to it, which I don't want -

<a title="Dyne Drewett" href="http://test.dynedrewett.com">
    <img class="attachment-full" width="202" height="78" alt="Dyne Drewett Solicitors" src="http://test.example.com/Website-Header.png">
</a>

Upvotes: 3

Views: 424

Answers (7)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

Technically, you cannot set a style on an element based on what elements it contains. You cannot make the border of an a element depend on the presence of an img element inside (and this is what you are dealing with). Using classes would help, but from the comments, it seems that this is out of the question.

There’s a workaround: place each image at the bottom of the containing element (not on the baseline as per defaults), and shift it down one pixel, or whatever the border width might be. This way, the image will cover the bottom border, provided that the image has no transparency. CSS code:

a img {
    vertical-align: bottom;
    position: relative;
    top: 1px;
}

This slightly changes the position of all images, so it might affect the overall layout unless you take precautions.

Upvotes: 2

punkrockbuddyholly
punkrockbuddyholly

Reputation: 9794

Another way to achieve this is to simply make the images in links relative and then offset the bottom to cover the border. 5px seems to do it http://jsfiddle.net/ECuwD/

a{
    color: #6A737B;
    text-decoration: none;
}
a:hover{
    border-bottom: 1px solid #C60B46;
    text-decoration: none;
}

a img {
    position:relative;
    bottom: -5px;
}

Upvotes: 1

Glitch Desire
Glitch Desire

Reputation: 15023

The only static way to do this would be to use a class on image links like:

<a href='http://whatever.url.here/' class='imglink'>
    <img src='img/image.png' alt='Alt text'>
</a>

Then apply a CSS style to this class:

a.imglink:hover {
    border-bottom: 0px solid;
}

You'd have to declare this AFTER the other a:hover CSS class.

Upvotes: 2

Gus Monod
Gus Monod

Reputation: 110

Apparently, what you want is a different behavior for the same markup (<a>) based on its content.

Sadly, there is no real way to do this with pure CSS, as this language is not programming language and therefore lacks the condition structures, such as if.

That does not mean that there is no solution! Here is a couple of things you can do:

  1. Declare (say) in your HTML that the element (<a>) should be handled differently (with classes, in your case either <a class="text"> or <a class='image'>.

  2. Use JavaScript to change your style dynamically, which means based on conditions, such as content for instance. In your case it would probably be something like:

    function onLoad() {
    for (var element in document.body) {
        // look for links
        // if this is a link:
            // look for image inside link
            // if there is one:
                // remove the border
    }
}

Upvotes: 0

jmbertucci
jmbertucci

Reputation: 8234

Your solution will require you adding an additional class name to links that wrap images (or anything where the border should be removed). There's no way to sort of "reverse select" unless you want to employ a JavaScript technique.

A jQuery technique would be something like this:

$('a > img').parent().css('border-bottom', 'none');

That will remove a "border-bottom" style from all anchor tags that have image as a direct descendant. But you'll need it on every page, and every page is getting parsed by this script, so it's a little added overhead on each page.

Otherwise, if you have access to the HTML, creating a CSS class to target these specific links such as:

a.img-link{ border-bottom:none; }

And apply it to any link that's around an image such as:

<a href="#" class="img-link"><img src="#" alt="" /></a>

I hope that helps!

Upvotes: 1

daamsie
daamsie

Reputation: 1598

I'd suggest adding a class to the link, so you can do

a.imglink:hover{
  border:0;
}

Alternatively, if you can't control that class, you can try adding a negative margin to your image to ensure the border doesn't show: 

a img{
    margin:0 0 -1px 0;
}

That -1px might need adjusting based on your other rules

Here's a fiddle to show the negative margin solution: http://jsfiddle.net/QRXGe/

Upvotes: 1

klewis
klewis

Reputation: 8350

a:hover img {
border-bottom:none;
}

or perhaps...

a:hover img.attachment-full {
  border-bottom:none;

}

Upvotes: 0

Related Questions