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直接引用它，并在那里取消设置背景和填充。

不幸的是，您无法通过确定纯css包含的内容来选择a。你可以用javascript做到这一点，但很有可能这将是一个矫枉过正。例如，jQuery的:has()选择器提供了您搜索的功能。还有seems to be选择器为草稿中的CSS提供此功能。

Answer 2

谢谢你们。

用这个脚本解决了它。

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

Answer 3

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

css背景颜色显示图像链接

3 个答案: