使用jQuery去除下划线

Question

使用jQuery去除下划线

8

I have a link like:

HTML:

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

CSS:

a { text-decoration: underline}

我希望从图片中去掉下划线。

我尝试过：

a img {text-decoration:none}

但它不起作用。

BS: 如果我给添加display:block，我可以做到这一点，但这可能会对整个网站造成损害，而且我不想为此部分添加特定的类。

我能用jQuery做到吗？

- Cheerio

你想要使用{text-decoration: none}。 - John Strickler

尝试复制您的代码，但我的图像上没有任何下划线。是否有其他样式干扰了它？ - Francis Gilbert

@John Strickler：我希望我的链接有下划线。 - Cheerio

@Francis Gilbert，也许你正在使用重置或其他东西。不过我只有一个CSS文件，其中包含一个a和img属性。 - Cheerio

不，就像你上面说的那样，只需包括明显的<head>等。 - Francis Gilbert

问题在于“text-decoration: underline”会将A标签中的所有内容都加下划线。他不希望A标签中的图片被加下划线。 - Steve Hansell

7个回答

1

这个怎么样：

$("img[src="stack.png"]).css("text-decoration","none");

**编辑

您的问题是如何为特定元素添加样式而不影响DOM的其余部分？还是您需要设置哪些样式来特别去除下划线？

- JoshBerke

1

这应该对您有所帮助。

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

- Steve Hansell

他写道他已经尝试使用正确的CSS添加它，但它不起作用。即使使用jQuery也不行 http://jsfiddle.net/XFVMQ/1/ - Sotiris

将其放入一个准备好的函数中，并将“a img”更改为“a”-请参见新的fiddle：http://jsfiddle.net/XFVMQ/2/或http://jsfiddle.net/XFVMQ/5/。 - John Strickler

那么 $('a img').css('float', 'left') 呢？ - Steve Hansell

@史蒂夫·汉塞尔：谢谢你，但我无法将float添加到图像中。 - Cheerio

@John Strickler，它可以工作，但链接也没有下划线 :) - Cheerio

1

你可以尝试这样做：

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

- Goyuix

1

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

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

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

- Blender

谢谢。在提问之前，我已经尝试了许多 CSS 解决方案，但都没有成功。 - Cheerio

0

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

- Dan

1

+1 - 图片本身不应该有下划线，但根据浏览器默认设置，可能会有边框。 - FishBasketGordo

正如我之前所说的：解决方案是将 display:block 添加到 img，但这会造成损坏。 - Cheerio

使用inline-block可能会防止一些“损坏”，但最好的方法是去掉边框。如@FishBasketGordo上面提到的，图像实际上没有下划线，而是有边框。将边框设置为“none”或“0px”应该可以解决这个问题。 - Dan

0

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

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

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

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

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

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

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

- Sotiris

我不能这样做，因为我正在运行一个PHP脚本，所以我无法编辑或生成代码 :) - Cheerio

2

@MiniNaim，我能想到的唯一“不太好”的方法是添加a img {margin-bottom:-3px}。这将使下划线移动，结果被图像覆盖。http://jsfiddle.net/XFVMQ/3/ - Sotiris

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason Gennaro · Accepted Answer

您可以使用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，并相应地更改样式。）

Fiddle http://jsfiddle.net/jasongennaro/vM55K/

编辑 2：

如果那是一个 a 中唯一的 child 元素，则可以使用以下代码：

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

Fiddle http://jsfiddle.net/jasongennaro/vM55K/1/