Удалить границу из-Tag, если ссылка изображение

Question

я следующий HTML и CSS код:

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

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

Проблемы в том, что а-тег следует добавить границу, когда только зависание если приложенное ссылка НЕ ​​является изображением.

Граница отсутствует на изображении, она находится на a-Tag ... Как я могу это решить?

Есть ли решение для этого?

Answer 1

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

, если у вас есть только один а-тег, который имеет изображение, вы можете использовать идентификатор

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

Если вы тусклый применить ко многим другим, вы можете использовать class

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

Я не знаю, можете ли вы использовать Jquery, но это решение, чтобы проверить, есть ли изображение, а затем удалить границу. Как проверить, если тег имеет изображение ниже в JQuery

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

Answer 2

использовать следующий CSS для ссылки якорь изображения:

a img { border: none; } 

a:hover img { border: none; } 

Answer 3

CSS не может это сделать, но Jquery может легко помочь вам:

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

испытание его здесь: http://codepen.io/anon/pen/zGZbVj