删除强调与jQuery

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来做到吗？

来源

2011-06-07 Cheerio

您想使用{文字装饰：无} – 2011-06-07 15:50:43

试图复制你的代码，我没有得到任何强调我图片。是否有另一种风格干扰这一点？ – 2011-06-07 16:01:00

@John Strickler：我想让我的链接加下划线 – Cheerio 2011-06-07 16:09:10

你应该这样做与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/

来源

2011-06-07 15:40:50

无法编辑HTML代码。我只能添加一个jQuery或CSS代码 – Cheerio 2011-06-07 15:46:40

作出编辑@MiniNaim – 2011-06-07 16:02:00

gennaro：谢谢，但我想链接'stackoverflow'加下划线 – Cheerio 2011-06-07 16:22:44

这应该为你做。

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

来源

2011-06-07 15:38:26

它是一样的。不起作用。 – Cheerio 2011-06-07 15:41:51

他写道，已经尝试添加正确的CSS，但它不起作用。它不适用于jQuery也http://jsfiddle.net/XFVMQ/1/ – Sotiris 2011-06-07 15:43:09

把它放在一个准备好的函数中，并将'img'改为'a' - 看到新的小提琴：http://jsfiddle.net/ XFVMQ/2 /或http://jsfiddle.net/XFVMQ/5/ – 2011-06-07 15:49:33

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

来源

2011-06-07 15:39:10 Dan

+1 - 图像不应该有下划线，本身，但它可能有一个边框，取决于浏览器的默认值。 – FishBasketGordo 2011-06-07 15:44:16

正如我之前说过的：解决方法是在'img'中添加一个'display：block'，但这会导致损坏 – Cheerio 2011-06-07 15:47:45

使用内联块可能会阻止一些'损坏'，但最好的办法是去除边境。正如上面提到的@FishBasketGordo，图像并没有真正的下划线，它们有边界。将边框设置为“无”或“0px”应解决此问题。 – Dan 2011-06-07 15:50:04

我觉得这是更好地单独的锚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/

来源

2011-06-07 15:41:41 Sotiris

我不能这样做，因为我运行一个PHP脚本，所以我不能编辑或生成代码:) – Cheerio 2011-06-07 15:46:03

@MiniNaim然后我唯一可以考虑的“脏”方法是添加'一个img {margin-bottom： -3px}'。这将移动图像覆盖的下划线结果。 http://jsfiddle.net/XFVMQ/3/ – Sotiris 2011-06-07 15:50:00

什么：

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

**编辑

是您的问题如何样式添加到特定的元素，而不会影响DOM的休息吗？或者是你的问题，你需要设置专门摆脱下划线的是什么风格？

来源

2011-06-07 15:51:56 JoshBerke

你可以尝试这样的：

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

来源

2011-06-07 15:56:21 Goyuix

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

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

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

来源

2011-06-07 16:13:49 Blender

谢谢。在编写我的问题之前，我已经尝试了许多CSS解决方案。它不起作用。 – Cheerio 2011-06-07 16:19:12

删除强调与jQuery

回答

相关问题