在图像链接上显示css背景色

我有这个问题，我认为是一个简单的解决办法，但它不会工作

在我的内容中，我希望所有链接都是红色文本，悬停时，我希望红色背景带有白色文本和半径以及一些填充。我还将过渡设置为使其平滑

我不想在图片链接上出现这些内容，所以在底部我重置了图片的背景和填充。 但我仍然在图片底部有一个红色边框

有人能帮我解决这个问题吗？ 谢谢大家!

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

通过选择

#content a:link img

可以重置图像本身的背景，但需要为

a

重置背景

您可以为包含

img

元素的

a

元素设置特殊类，并重置此特殊类的背景

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

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

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

这是一个文本链接
#content.image链接{背景：无；}

这是因为您没有取消设置链接的背景，而是取消设置链接内图像的背景

解决方法是在包含图像的每个链接上都放置一个类，这样您就可以通过

#content.className

直接引用它，并在那里取消背景和填充

不幸的是，你不能通过纯css来选择一个

a

。您可以使用javascript实现这一点，但这很可能是一种过激的行为。例如，jQuery有一个

：has（）

选择器，正好提供您搜索的功能。还有一个选择器在草稿中为CSS提供此功能。

谢谢大家

用这个脚本解决了它

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

$（“a”）.has（“img”）.css（“背景色”、“透明”）；