Html 悬停时在 <a> 标签下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16839284/
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
underline <a> tag when hovering
提问by jal nami
I want my <a>tag gets underlined when hovered. I have the following code, but it doesn't work.
我希望我的<a>标签在悬停时带有下划线。我有以下代码，但它不起作用。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
a.hover:hover {text-decoration: underline;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="hover" style=" text-decoration:none; color:red" href="">Site Map</a>
</div>
</form>
</body>
</html>
This:
这个：
a:hover {text-decoration: underline;}
<a style=" text-decoration:none; color:red" href="">Site Map</a>
doesn't work either.
也不起作用。
What should I do? What is the problem?
我该怎么办？问题是什么？
回答by Quentin
The styleattribute is more specificthan any selector, so it will always be applied last in the cascade (horrible !importantrules not withstanding). Move the CSS to the stylesheet.
该style属性比任何选择器都更具体，因此它总是在级联中最后应用（尽管有可怕的!important规则）。将 CSS 移动到样式表。
a.hover {
color: red;
text-decoration: none;
}
a.hover:hover {
text-decoration: underline;
}
(I also suggest a more semantic name for the class).
（我还建议为类使用更语义化的名称）。
回答by Shankar Cabus
The inline style overrides the style on the page.
内联样式会覆盖页面上的样式。
Remove the inline style and uses this:
删除内联样式并使用它：
<style type="text/css">
a {text-decoration: none;}
a:hover {text-decoration: underline;}
</style>
Also advise you not to use <style>, uses an external css file. Will greatly facilitate maintenance.
还建议您不要使用<style>, 使用外部 css 文件。将大大方便维修。
回答by Nguyen Phung Hung
I think that you should write code like: (Demo here: http://jsfiddle.net/BH7YH/)
我认为你应该写这样的代码： （演示这里：http://jsfiddle.net/BH7YH/）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
a {text-decoration: none; color:red}
a:hover {text-decoration: underline;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="hover" href="">Site Map</a>
</div>
</form>
</body>
</html>
回答by MjeOsX
when you use hover you cannot use inline styles. you have to write it like this:
当您使用悬停时，您不能使用内联样式。你必须这样写：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
a.hover
{
text-decoration: none;
color:red
}
a.hover:hover
{
text-decoration: underline;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="hover" href="">Site Map</a>
</div>
</form>
</body>
</html>
回答by John Hack
This will work for you.
这对你有用。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ABC</title>
<style type="text/css">
a.hover {text-decoration: none; color: red;}
a.hover:hover {text-decoration: underline;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="hover" href="">Site Map</a>
</div>
</form>
</body>
</html>
Read more about css specification.
阅读有关 css 规范的更多信息。
回答by Aniket Kariya
This might help!
这可能会有所帮助！
a.hover:link {text-decoration: none;}
a.hover:hover {text-decoration: underline;}
