我在我的锚链接上定义了一个底部边框(2px)。
问题:当这些是链接时,此底部边框也会应用于我的图片。
如何在图像上避免这种底部边框?
HTML:
<a href="#">hello</a>
<a href="#">
<img src="https://cdn0.iconfinder.com/data/icons/cosmo-medicine/40/dog-128.png">
</a>
的CSS:
a {
text-decoration: none;
color: #3e3e3e;
border-bottom: solid 2px #60bbd2;
}
a img {
border: 0;
}
a:hover{
border-bottom: 0px none;
color: #60bbd2;
}
Jsfiddle:http://jsfiddle.net/8L63n7nu/1/
感谢。
答案 0 :(得分:2)
img
上的边框不在a
上,这就是为什么a img {border: 0;}
不会改变任何内容的原因。 CSS不幸的是没有:parent或:contains-selector,您可以使用它来检查a
是否包含图像,因此您必须将以某种方式分离的链接分开。我建议给链接一个类,例如:
<a href="#" class="image">
<img src="https://cdn0.iconfinder.com/data/icons/cosmo-medicine/40/dog-128.png">
</a>
并添加规则:
a.image{border:none}
...或...
如果您不想添加课程,则必须使用JS。 jQuery有:has()
选择器,您可以使用它来检查元素是否包含指定的元素。如果你将它包装在一个jQuery包装器中,它会在页面加载时运行,就像css那样工作。
$(function(){
$("a:has(img)").css({border:"none"});
});
请注意,如果您在不刷新页面的情况下添加更多链接(例如使用ajax),则必须再次运行上述功能来处理新链接。
这里也是一个有效的fiddle。
答案 1 :(得分:1)
将一个类添加到包含图像的锚点
HTML:
<a href="#" class="img">
<img src="https://cdn0.iconfinder.com/data/icons/cosmo-medicine/40/dog-128.png">
</a>
CSS:
a {
text-decoration: none;
color: #3e3e3e;
border-bottom: solid 2px #60bbd2;
}
a.img {
border: 0;
}
a:hover{
border-bottom: 0px none;
color: #60bbd2;
}