Question

我有一个类似的链接：

HTML

<a href="#" title=""> <img src="stack.png" alt="" title="" /> stackoverflow </a>

CSS：

a { text-decoration: underline}

我想从图片中删除underline。

我试过了：

a img {text-decoration:none}

但它不起作用。

BS：如果我向display:block添加了img但是这可能会对网站的其他部分造成损害，我可以这样做，我也不会为此部分添加特定的类。

我能用jQuery做到吗？

Answer 1

你应该用CSS做到这一点。

您可以为该链接添加内联样式：

<a href="#" style="text-decoration:none;"> <img src=...etc /> stackoverflow </a>

或者您可以在该链接中添加一个类：

<a href="#" title="" class="img"> <img src=...etc. /> stackoverflow </a>

In your css...

a.img {text-decoration:none;}

修改

如果你不能改变html，那么使用jQuery：

$('a img').parent().css('textDecoration','none')

（这与上面的内容类似，但定位于img的父级 - 即a - 然后相应地更改样式。）

小提琴 http://jsfiddle.net/jasongennaro/vM55K/

编辑2：

如果这是child中唯一的a元素，您可以使用此功能：

$('a').children().css('textDecoration','none')

小提琴 http://jsfiddle.net/jasongennaro/vM55K/1/

Answer 2

这应该为你做。

$('a img').css('text-decoration','none')

Answer 3

怎么样：

$（ “IMG [SRC =” stack.png “]）的CSS。（” 文字修饰”， “无”）;

**修改

您的问题是如何在不影响DOM的其余部分的情况下向特定元素添加样式？或者你的问题是你需要设置哪些样式来专门去除下划线？

Answer 4

您可以尝试这样的事情：

$("a img").parentsUntil("a").css("text-decoration","none");

Answer 5

也许这是一个特异性问题？

尝试使用更具体的CSS选择器删除边框和所有装饰：

a > img {
  border: none;
  text-decoration: none;
}

Answer 6

您可能想要使用CSS：a img {border: none}或者您可以尝试将图片设置为display: inline-block

Answer 7

我认为最好分开img和文本的锚点。请尝试以下标记：

<a href="#" title=""><img src="stack.png" alt="" title="" /></a><a href="#" title="">stackoverflow </a>

演示：http://jsfiddle.net/XFVMQ/

根据我的评论，第二个解决方案是为margin-bottom:-3px添加a img。

演示：http://jsfiddle.net/XFVMQ/

为outline: 3px solid white;添加a img的第三个解决方案将覆盖下划线，将其更改为正确的颜色。

演示：http://jsfiddle.net/XFVMQ/6/

用jQuery删除下划线

7 个答案: