CODEWITHSUNDEEP
htmlcss
Torben
Torben

Reputation: 5494

Remove border from a-Tag if the link is an image

I have the following HTML and CSS code:

HTML:
<a href="http://www.google.com/" target="_blank"><img src="image.jpg" /></a>

CSS:
a:hover {
border-bottom:1px solid #000;
}

The issue is, that the a-Tag should add the border when hovering only if the enclosed link is NOT an image.

The border is not on the image, it is on the a-Tag...How can I solve this?

Is there a solution for this?

Upvotes: 0

Views: 344

Answers (3)

Salman Farsi
Salman Farsi

Reputation: 81

use following CSS for anchor image link:

a img { border: none; }

a:hover img { border: none; }

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106058

CSS cannot do this , but Jquery can easily help you :

$(document).ready(function(){
  $("img").parent("a").css( "border-bottom" , "none" );
});

test it here : http://codepen.io/anon/pen/zGZbVj

Upvotes: 1

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

a img, a img:hover { border:none; }

if you have only one a-tag that has an image, you can use an id

#myImageATag, #myImageATag:hover{
   border:none;
}
<a id="myImageATag"></a>

If you wan to apply to many others, you can use a class

.linksWithImages, .linksWithImages:hover{
        border:none;
}

I don't know if you can use Jquery but this is a solution to check if there is an image then remove the border. How to check if the a tag has an image below in jQuery

$('a').each(function() {
    if ($(this).find('img').length === 0) {
        $(this).css("border", "none");
    }
});

Upvotes: 1

Related Questions