Question

我正在开发一个有这些要求的项目：

当悬停在具有锚点的区域上时，该区域中所有锚点的颜色（非悬停/活动状态）会发生变化。
这些锚点的活动/悬停状态颜色应该继承正常的锚点活动/悬停颜色。

我能够达到第一个要求，但是当悬停在特定链接上时，活动/悬停状态根本不会改变。这显然是一个具体的问题，但我似乎无法弄清楚原因。

以下是代码的简化版本：http://codepen.io/dbough/pen/maxrv

a:link, a:visited {
  color:green;
}
a:hover, a:active, header .color a:hover, header .color a:active {
  color:pink;
}
.color a:link, .color a:visited{
  color:red;
}

$("header").hover(function() {
  $("header").addClass("color");
        },
        function() {
            $("header").removeClass("color");
        }
    )

Answer 1

用最简单的术语来说。

为所有链接定义颜色
设置悬停在 ul 上的悬停颜色
当a悬停时设置不同的颜色

a：link {   颜色：绿色; }

ul：hover a {    颜色：粉红色; }

ul a：hover {   红色; }

<强> Codepen Example

这是否符合标准（？）......并且不需要JS

Answer 2

这与特异性无关，你的选择器不匹配。

header .color a:active {

您正在使用JavaScript将类添加到<header>元素，但您正在编写一个选择器，其中包含该类的元素是<header>的后代。

从选择器中删除该后代组合子：

header.color a:active {

Answer 3

删除你的样式和jquery悬停函数并尝试使用它（仅限css）：

html,body {
  margin:0;
  padding:0;
}
header {
  width:50%;
  padding:auto;
  margin:auto;
}
li {
  display:inline;
  padding:50px;
}

a, a:link, a:visited{
  color:green;
}
a:hover, a:active{
  color:pink !important;
}
header:hover a{color:red;}

HTML / CSS锚标签样式特异性

3 个答案: