悬停时去除下划线链接

Question

我试图在鼠标悬停时去除下划线，但似乎没有起作用。

<a href="agent_user_add.php"><font face="verdana" class="pluslink" style="font-size:26px;">+</font></a>

以下是我的样式：

.pluslink a:link {text-decoration:none;} .pluslink a:visited {text-decoration:none;} .pluslink a:hover {text-decoration:none;} .pluslink a:active {text-decoration:none;}

为什么它不起作用？我将类放错了吗？

这里有一个 jsfiddle 链接供参考！

jSfiddle

- soniccool

---

@Musa 我不知道这个问题是否被编辑过，但是有一个。 - Roko C. Buljan

我想我错过了那个。 - Musa

你应该更新你的代码；这不是最佳方法。最好创建一个类并在其中定义字体属性，然后在<a>标签中调用该类。 - Kheema Pandey

一个简单的事情，删除<font face="verdana" class="pluslink" style="font-size:26px;">及其闭合标签。将class="pluslink"应用于<a>。<font>标签是老派的，已经过时了 ;) - misterManSam

Answer 1

.pluslink, .pluslink:visited,.pluslink:hover,.pluslink:active {
   text-decoration:none;
 }
<a href="agent_user_add.php" class="pluslink">+</a>

请查看http://jsfiddle.net/3pTTR/

fiddle已更新

- Manish Jangir

---

你看到那个小提琴了吗？ - Manish Jangir

需要在CSS中的类中添加字体大小以复制问题中的内容。 - nathangiesbrecht

Answer 2

地址：

a.pluslink {
    text-decoration:none;
}

Fiddle

- JunM

---

如果要使这个工作正常，类名也需要从字体标签移动到a标签中。 - nathangiesbrecht

Answer 3

您的样式未能达到预期，因为在名为pluslink的元素中没有a。如果您想特别针对这个a进行目标定位，您需要给它一个类或通过其父元素来定位它。

另外，<font>是上世纪90年代的产物，已经过时了。相反，应该通过CSS定位并设置字体。

- ralph.m

Answer 4

Manish Jangir的回答可以解决问题，或者如果您更喜欢具体的样式，您可以选择：

a .pluslink {text-decoration:none;}
a .pluslink:visited {text-decoration:none;}
a .pluslink:hover {text-decoration:none;}
a .pluslink:active {text-decoration:none;}

- myTerminal

---

a.plus链接的CSS仅适用于具有pluslink类的a标签。原始问题将pluslink类应用于a标签内的字体标签，因此该CSS不会应用于a标签。字体标签将从其父级（在本例中为a标签）继承text-decoration属性。 - nathangiesbrecht

谢谢nathangiesbrecht，我已经编辑了我的解决方案 :) 上一次我错过了它。 - myTerminal

Answer 5

font标签默认从其父元素继承文本装饰属性。在这种情况下，您将font标签包含在a标签中，默认为text-decoration: underline。

您应用的CSS适用于带有类名为pluslink的元素的后代a标签。在您的情况下，pluslink类应用于a标签的子标签font。这与您想要的CSS相反。

最简单的解决方案是将font标签移动到a标签之外：

jsFiddle

或者，您可以将pluslink类应用于a标签，并编辑CSS代码以包括字体大小和字体系列。font标签已经被弃用了一段时间。这还使您的代码更易管理。

{{link1：jsFiddle}}

- nathangiesbrecht