css цвет фона показать на картинке ссылки

Question

У меня есть эта проблема, которую я считал легким решением, но она не будет работать.

В моем содержании я хочу, чтобы все ссылки были красным текстом, и когда наведите курсор, я хочу, чтобы красный фон с белым текстом и радиусом и некоторые дополнения. Я также поставил переход, чтобы сделать его гладким.

Я не хочу, чтобы это было на ссылках на изображение, поэтому в нижней части я меняю фоны и отступы для изображений. Но я все еще получаю красную рамку внизу изображения.

Может кто-нибудь разобраться со мной? Спасибо!

#content a:link, #content a:visited, #content a:active{ 
color:#c5252c; 
text-decoration:none; 
padding:0; 
border-radius: 2px; 
-moz-border-radius: 2px; 
-webkit-border-radius: 2px; 

-webkit-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
-moz-transition: all 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
-ms-transition: all 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
-o-transition: all 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
transition: all 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */ 

-webkit-transition-timing-function: cubic-bezier(0.445, 0.030, 0.550, 0.950); 
-moz-transition-timing-function: cubic-bezier(0.445, 0.030, 0.550, 0.950); 
-ms-transition-timing-function: cubic-bezier(0.445, 0.030, 0.550, 0.950); 
-o-transition-timing-function: cubic-bezier(0.445, 0.030, 0.550, 0.950); 
transition-timing-function: cubic-bezier(0.445, 0.030, 0.550, 0.950); /* easeInOutSine */} 

#content a:hover{ 
background:#c5252c; 
color:#FFF; 
text-decoration:none; 
padding:0 4px 0 4px; 
} 


#content a:link img, #content a:hover img, #content a:active img, #content a:visited img{ 
padding:0px; 
background-color:transparent; 
background:none; 
} 

Answer 1

Это потому, что вы не отменяете фон ссылки, а фон изображения внутри этой ссылки.

Решение для этого было бы поместить класс на каждую ссылку, содержащую изображение, чтобы вы могли ссылаться на нее напрямую на #content .className и удалять фон и отступы там.

К сожалению, вы не можете выбрать a, выяснив, что он содержит с чистым css. Вы можете сделать это с помощью javascript, но вполне возможно, что это будет излишним. Например, jQuery имеет селектор :has(), обеспечивающий именно ту функциональность, которую вы ищете. Также есть seems to be селектор, обеспечивающий эту функциональность CSS в черновике.

Answer 2

При выборе #content a:link img вы сброс фона на само изображение, но вам нужно сбросить его для a.

Вы можете установить специальный класс для элементов a, содержащих img элементов, и сбросить фон для этого специального класса.

<a class='image-link'> 
    <img src="..." /> 
</a> 

<a>this is a text link</a> 

#content .image-link {background:none;} 

Answer 3

Спасибо, ребята.

Решил использовать этот сценарий.

<script> 
$("a").has("img").css("background-color", "transparent"); 
</script>