Question

我有以下标记：

<div class="nav-font  nav-item-3">
    <a href="/arc/place" class="top_nav">favorite places</a>
</div>

并希望定位喜欢的地方的链接颜色。我有以下jquery：

$('.nav-font').on('mouseover',function(){
  //console.log('here i am');
  $(this).addClass('light-color');
});

但它不会覆盖a：hover。我将如何更具体地设置值？

THX

更新＃1：

这里是样本css（做一个或另一个）。我认为第一个会更“具体”，但标准是：我拥有的悬停仍然优先。感谢帮助！

.light-class a:hover{
  color: #f5e9d1;
}

.light-class{
  color: #f5e9d1;
}

Answer 1

您会以与打算影响链接相同的方式影响它。通过在css中声明它：

.light-color a{
    color:#ff6600;
}

.light-color a:hover{
    color:#ff0066;
}

显然使用你自己的颜色并使选择器合适，但这是一般的想法。

但是，如果这个答案只是冒昧，你也可以发布你的CSS，这样我们就能看到你正在做的事情.light-color

编辑：

因此，如果你已经尝试过这种方法，或许你的选择器更具体，那么将为新添加的类提供更高的优先级：

.nav-font.light-color a.top_nav, .nav-font.light-color a.top_nav:hover{
    color: #f5e9d1;
}

Answer 2

您的.on已在.nav-font，所以它正在那里添加课程。 a:hover位于内部，并取代其容器。如果你这样做：

$('.nav-font a').on('mouseover',function(){
  $(this).addClass('light-color');
});

然后它会定位a而$(this)会引用a并在那里添加课程。您可以将其缩写为：

$('.nav-font a').hover(function() {
  $(this).toggleClass('light-color');
});

Answer 3

如果我正确理解了这个问题，那么你说你的css中已经定义了一种用于悬停的颜色。也许是这样的事情：

.top_nav:hover {
    color: #990000;
}

并且您希望确保在应用新的.light-color类时被覆盖。如果这些假设是正确的，那么您要做的是确保覆盖颜色的选择器比正常悬停更高css specificity。这样的事情可以解决问题：

.light-color .top_nav:hover {
    color: #000099;
}

如果您需要更具体的特性，可以继续添加到选择器，直到样式覆盖您的初始悬停颜色：

div.nav-font.nav-item-3.light-color a.top_nav:hover {
    color: #000099;
}

通常情况下，您将尝试仅根据您的需要进行具体操作，因此如果您需要再次覆盖您的风格，您最终不会伤害自己。请务必查看一些有关特异性的文档。

就个人而言，我试图坚持这些规则：

避免！不惜一切代价重要
尽可能避免id选择器，如#my_id，因为它们很难覆盖
特定的选择器，如div.my_class，其中只需.my_class即可。这有助于特异性覆盖，但如果你想在不是div的东西上重用你的类，也会使事情变得更加灵活。