避免我的图像(链接)有一个底部边框

时间:2015-06-02 10:58:16

标签: html css

我在我的锚链接上定义了一个底部边框(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/

感谢。

2 个答案:

答案 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;
}

http://jsfiddle.net/8L63n7nu/14/