javascript 如何从链接中删除下划线并在悬停时添加下划线？（附图片）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6556326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove underline from a link and add underline on hover? (images attached)
提问by Sumit Gupta
I want underline to be removed from a link. Also I want underline to appear when I hover it with my mouse pointer. How can this be done? Pls help.
我想从链接中删除下划线。我还希望当我用鼠标指针悬停它时出现下划线。如何才能做到这一点？请帮忙。
No hover:
没有悬停：
When I hover the Loginlink:
当我悬停Login链接时：
回答by andyb
You need to turn off the CSS property text-decorationfor the link and then use the :hoverdynamic pseudo classto add the text-decorationback when hovering.
您需要关闭text-decoration链接的CSS属性，然后在悬停时使用:hover动态伪类添加text-decoration返回。
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
Also, you might also need to style the :visited:hoverpseudo class so that the underline appears on links a user has already visited. link order in cssis a good answer because the orderof the CSS rules matters.
此外，您可能还需要设置:visited:hover伪类的样式，以便在用户已经访问过的链接上显示下划线。css中的链接顺序是一个很好的答案，因为CSS 规则的顺序很重要。
回答by alex
Assuming your login link has the id login...
假设您的登录链接具有 id login...
#login {
text-decoration: none;
}
#login:hover {
text-decoration: underline;
}
回答by Anil
In your style sheet, whatever the ID is.
在您的样式表中，无论 ID 是什么。
#LoginButton a:active {text-decoration: none;}
#LoginButton a:hover {text-decoration: underline; color: white;}
回答by Harun
Call a CSSClass within the login button and define the following lines in the style sheet,
在登录按钮中调用 CSSClass 并在样式表中定义以下几行，
.ClassName a:link {text-decoration:none;}//removes underline
.ClassName a:hover {text-decoration:underline;}// displays underline on mouse over
Hope this helps..
希望这可以帮助..
