0

我有以下标记：

<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。我将如何更具体地设置这里的值？

谢谢

更新#1：

这是示例 css（做一个或另一个）。我认为第一个会更“具体”，但我拥有的标准 a:hover 仍然优先。感谢帮助！

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

.light-class{
  color: #f5e9d1;
}
4

3 回答 3

2

您会以与您打算影响链接相同的方式影响它。通过在 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;
}
于 2012-12-04T01:46:43.593 回答
0

你.on是 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');
});
于 2012-12-04T01:50:09.380 回答
0

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

.top_nav:hover {
    color: #990000;
}

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

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

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

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

通常你会尽量做到你绝对需要的具体，所以如果你以后需要再次覆盖你的风格，你最终不会伤害自己。确保您检查了一些有关特异性的文档。

就个人而言，我尝试遵守以下规则：

  • 不惜一切代价避免 !important
  • 尽可能避免使用 id 选择器，例如 #my_id，因为它们很难被覆盖
  • 像 div.my_class 这样的特定选择器，只需 .my_class 即可。这有助于特异性覆盖，但如果你想在不是 div 的东西上重用你的类，也会使事情变得更加灵活。
于 2012-12-04T01:57:43.880 回答