如何去除链接下划线并在悬停时添加下划线？（附图）

Question

我希望去掉链接下划线，并在鼠标悬停时显示下划线。如何实现？请帮忙。

没有悬停效果:

当我悬停在Login链接上时：

- sumit

Answer 1

你需要关闭链接的CSS属性text-decoration，然后在悬停时使用:hover动态伪类来重新添加text-decoration。

a {
    text-decoration:none;
}

a:hover {
   text-decoration:underline;
}

示例

此外，您可能还需要为:visited:hover伪类设置样式，以便下划线出现在用户已经访问过的链接上。 CSS中的链接顺序是一个很好的答案，因为CSS规则的顺序是有影响的。

- andyb

Answer 2

假设您的登录链接具有ID login ...

#login {
   text-decoration: none;
}

#login:hover {
   text-decoration: underline;
}

- alex

Answer 3

在你的样式表中，无论ID是什么。

#LoginButton a:active {text-decoration: none;}
#LoginButton a:hover {text-decoration: underline; color: white;}

- Anil

Answer 4

在登录按钮中调用CSSClass，并在样式表中定义以下行：

   .ClassName a:link {text-decoration:none;}//removes underline


   .ClassName a:hover {text-decoration:underline;}// displays underline on mouse over

希望这可以帮到你。

- Harun