我希望我的<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>
此:
a:hover {text-decoration: underline;}
<a style=" text-decoration:none; color:red" href="">Site Map</a>
也不起作用。
我该怎么办?有什么问题?
答案 0 :(得分:25)
style
属性比任何选择器都更specific,所以它总是会在级联中最后应用(可怕的!important
规则)。将CSS移动到样式表。
a.hover {
color: red;
text-decoration: none;
}
a.hover:hover {
text-decoration: underline;
}
(我还建议为该类提供更多的语义名称。)
答案 1 :(得分:3)
内联样式会覆盖页面上的样式。
删除内联样式并使用:
<style type="text/css">
a {text-decoration: none;}
a:hover {text-decoration: underline;}
</style>
还建议您不要使用<style>
,使用外部css文件。将极大地方便维护。
答案 2 :(得分:1)
我认为您应该编写如下代码: 的(Demo here: 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>
答案 3 :(得分:0)
使用悬停时,无法使用内联样式。 你必须这样写:
<!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>
答案 4 :(得分:-1)
这对你有用。
<%@ 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>
阅读有关css规范的更多信息。
答案 5 :(得分:-3)
这可能会有所帮助!
a.hover:link {text-decoration: none;}
a.hover:hover {text-decoration: underline;}