悬停时下划线 <a> 标签答案

【问题标题】：underline <a> tag when hovering悬停时下划线 <a> 标签
【发布时间】：2013-05-26 05:05:56
【问题描述】：

我希望我的<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>

也不行。

我该怎么办？有什么问题？

【问题讨论】：

标签： html css tags

【解决方案1】：

style 属性比任何选择器都更多 specific，因此它总是在级联中最后应用（可怕的 !important 规则无法承受）。将 CSS 移至样式表。

a.hover {
    color: red;
    text-decoration: none;
}

a.hover:hover {
    text-decoration: underline;
}

（我还建议为该类命名更具语义化的名称）。

【讨论】：

【解决方案2】：

内联样式会覆盖页面上的样式。

删除内联样式并使用它：

<style type="text/css">
    a {text-decoration: none;}
    a:hover {text-decoration: underline;}
</style>

另外劝你不要使用<style>，使用外部css文件。将大大方便维护。

【讨论】：

默认行为是始终为所有链接加下划线。

【解决方案3】：

我认为您应该编写如下代码： (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>

【讨论】：

【解决方案4】：

当您使用悬停时，您不能使用内联样式。你必须这样写：

<!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>

【讨论】：

【解决方案5】：

这对你有用。

<%@ 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 规范的更多信息。

【讨论】：

【解决方案6】：

这可能会有所帮助！

a.hover:link {text-decoration: none;}
a.hover:hover {text-decoration: underline;}

【讨论】：

不，不会。 underline-on-hover 不是 text-decoration 属性的有效值。