css - :hover in css stylesheet doesn't show when

Question

当我这样做时，它起作用了:

.view-current-sales .col-first a {color:#66ff66;}

当我添加悬停时，它不再起作用了

.view-current-sales .col-first a:hover {color:#66ff66;}

有什么想法吗？

Answer 1

我认为您混淆了 a 标签及其对应的悬停标签。让我们用一个不同的例子来快速分解它。

HTML:

<div class="nohover3">
    <a href="#"> Test 3 </a>
</div>

CSS:

.nohover3 a {
    color:#66ff66;
}
.nohover3 a:hover {
    color:blue;
}

现在，我假设您将这些 a 标签包含在某种 div 或其他包含标签中，以拥有自己的独立类。现在，这个 HTML 呈现一个带有两个 CSS 元素的标签。第一个 CSS 元素为 a 标签提供了起始颜色，这意味着它会自动以您在原始问题中提供给我的那种石灰绿色开始。第二个元素为悬停提供了不同的颜色，在本例中，颜色从浅绿色变为蓝色。

话虽如此，让我们看一下您的示例，但使用更简洁的代码:

HTML

<div class="nohover2">
    <a href="#"> Test 2 </a>
</div>

CSS:

.nohover2 a {
    color:#66ff66;
}
.nohover2 a:hover {
    color:#66ff66;
}

在这种情况下，第一个和第二个元素都为 a 标签生成相同的颜色。这意味着 a 标签的开头颜色(浅绿色)与将鼠标悬停在 a 标签上时的颜色(也是浅绿色)相同。这意味着无论悬停与否，它都保持相同的颜色。

为了更清楚地描绘这里是一个 JsFiddle 来表示我刚才所说的:

DEMO

我提前为糟糕的类名道歉，目前创建示例不是我的强项。