CSS - 链接悬停不起作用答案

【问题标题】：CSS - link hover doesn't workCSS - 链接悬停不起作用
【发布时间】：2012-11-06 23:28:00
【问题描述】：

有谁知道如何使 CSS 链接悬停属性适用于不链接到另一个 html 页面或锚点的链接？

例如这有效：

<a href="page1.html">Page1</a>
<a href="#page9">Link</a>

a:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a:link,a:visited{
color:#555;
text-decoration:none;
}

但是，当我将链接更改为不是锚点或 html 文件的内容时，假设是 mailto：

<a href='mailto:bla@bla.com'>Send email</a>

当我将鼠标悬停在链接上时，它不再改变颜色。这是为什么呢？

【问题讨论】：

标签： hyperlink hover anchor mailto

【解决方案1】：

您正在覆盖自己的样式。试试

    <style type="text/css">
        a:link, a:visited
        {
            color: #555;
            text-decoration: none;
        }
        a:hover, a:visited:hover
        {
            color: #fff;
            text-decoration: none;
        }
    </style>

【讨论】：

【解决方案2】：

您不需要做 a:link，在定义锚标签样式时只需 a 就可以了，但是，如果出于某种原因确实需要它，那么您需要比链接样式更具体地定义悬停样式.

a:link:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a:link,a:visited{
color:#555;
text-decoration:none;
}

或

a:hover,a:visited:hover{
color:#fff;
text-decoration:none;
}
a,a:visited{
color:#555;
text-decoration:none;
}

会解决你的问题

【讨论】：