1

我正在尝试使我的链接保持白色，但是当鼠标悬停在它们上面时，它们会变为灰色并带有下划线但它不起作用，链接有效但它只是保持白色，这是我的 CSS 代码：

a:hover {
    text-decoration: underline;
    color:#666666
}

a:visited {
    text-decoration: none;
    color:#FFFFFF
}

a:link {
    text-decoration: none;
    color:#FFFFFF
}
4

5 回答 5

2

稍微澄清一下冰水的答案，诸如 等伪类:hover都:link具有与类相同的特异性，更重要的是它们彼此具有相同的特异性。

我和你在一起，我个人认为如果:visited暗示它会很好，!important因为它是用户控制的状态，但这会使它变得更加复杂，所以......是的。只需重新排列您的组 - 事实上，您需要的顺序与您现在的顺序完全相反。

于 2013-07-04T03:22:31.290 回答
1

为正常状态定义的悬停属性<a>（这意味着它涵盖已访问和未访问的链接）但是您已经定义a:visited并且a:link（并且在唯一声明之后也提到了它:hover），css解析器将改为提供属性这些定义的优先级更高。

解决方法

解决方法 #1

通过更改使其更具体：

a:hover {
    text-decoration: underline;
    color:#666666
}

至

a:hover, a:visited:hover, a:link:hover {
    text-decoration: underline;
    color:#666666
}

一个演示@http://jsfiddle.net/Wz6aR/

解决方法 #2

要更改优先级，请将声明顺序更改为：

a:visited {
    text-decoration: none;
    color:#FFFFFF
}

a:link {
    text-decoration: none;
    color:#FFFFFF
}

a:hover {
    text-decoration: underline;
    color:#666666
}

一个演示@http://jsfiddle.net/9cGPv/

于 2013-07-04T03:34:17.107 回答
1

您应该像这样订购链接伪类：

a {...}
a:link {...}
a:visited {...}
a:focus {...}
a:hover {...}
a:active {...}
于 2013-07-04T05:43:11.020 回答
0

由于 CSS 是级联的，最后一条规则会覆盖之前的规则。如果您a:link将更通用的定义向上移动，它应该可以正常工作。这当然是发生的最小变化。

于 2013-07-04T03:18:44.317 回答
0

您可以通过检查 Chrome devtools 中的样式轻松追踪此类问题。是你做的吗？

  1. 右键单击您担心的元素，然后选择“检查元素”。

  2. 样式选项卡将打开。在 element.style 旁边，在右侧，您会看到三个图标。中间是一个带有小箭头的虚线矩形。

  3. 单击它，将打开一个窗格。设置:hover状态。请参阅下面的屏幕截图。

  4. 现在检查正在应用的规则。您会注意到您的:hover规则设置的属性被划掉了。这意味着它们被覆盖了。您还将看到:link规则中的属性是正在应用的属性。这是为什么？因为，正如其他发帖者所指出的那样，该规则稍后出现在您的 CSS 中，因此具有优先权。

在 Chrome devtools 中调试 CSS 样式

“hover css”的快速谷歌会给你 MDN 上的相关页面，总是一个很好的资源，在第一段中指出：

:hover CSS 伪类在用户使用指针设备指定元素时匹配，但不一定激活它。此样式可能会被任何其他与链接相关的伪类覆盖，即 :link、:visited 和 :active，出现在后续规则中。为了设置适当的链接样式，您需要将 :hover 规则放在 :link 和 :visited 规则之后，但在 :active 之前，如 LVHA-order 所定义的那样： :link — :visited — :hover — :active。

SO 不是一个众包调试论坛。学会自己调试。

于 2013-07-04T05:51:00.503 回答