Question

我有：

导航栏（div＆gt; ul＆gt; li），其中包含一些导航链接。

悬停时添加的边框

.my-nav > li:hover {
    border-bottom: 0.2em solid white;
}

一个AngularJS指令，它将以下类应用于活动页面中的任何一个（使用路径）
```
.active-tab {
    border-bottom: 0.2em solid white;    
    font-weight: bold;
}
```

我的问题是：

如果我在活动标签“A”上并将鼠标悬停在活动标签“B”上，我希望从“A”中删除所有样式，但我不知道如何接近。
如果我将鼠标悬停在活动页面上（已经应用了活动标签页，则它会使边框的厚度加倍。

Answer 1

好吧，为了使活动链接上的边框加倍，您可以使用：

.active-tab:hover {
  border-bottom: 0.4em solid white;
}

调整宽度以品尝。要在“B”悬停时删除“A”的样式，您可能需要一个javascript解决方案。像这样（使用jQuery）：

$('.my-nav > li:not(.active-tab)').hover(function(){
  $('.my-nav > li.active-tab').css({ "border-bottom": "none", "font-weight": "normal"});
}, function(){
  $('.my-nav > li.active-tab').css({ "border-bottom": "0.2em solid white", "font-weight": "bold"});
});

然后，您可能想问一下为什么要使用该功能，因为将样式留在活动选项卡上或仅创建与悬停类略有不同的样式并不是一件大事。

Answer 2

您需要做的是在您在指令中添加类的其他元素上使用removeClass（）函数。

例如，如果所有其他都是锚标记，您可以使用以下代码： -

element.parent().find("a").removeClass("active-tab");        //add this to remove class from other elements
element.addClass("active-tab");          //you already have this

查看此plnkr： - http://plnkr.co/edit/Re6EAL6XRsKHqqHPq5kw?p=preview

至于你的边界问题，正如skv在他的回答中所说，你已经在元素和悬停样式上设置了边框。只需从悬停中删除边框，它就会按预期工作。

Answer 3

正在发生加倍，因为在一个（Angular）方面，您为li>a元素设置了底部边框，而在另一个（index.css）上，您在li处设置了它可以更改它到.my-nav>li>a:hover你会让问题消失。

关于第二部分或使活动标签消失，这不是互联网上的默认行为（活动始终突出显示），因为它是告诉用户他们在哪里的用户体验度量。如果你仍然希望实现这一点，你可以使用前一个回答者建议的Javascript

代码可以放在头文件中而不需要任何外部文件，即您只需将其复制并粘贴到</head>标记上方即可。

CSS导航链接样式：删除其他元素的样式＆amp;在选中时悬停时删除双边框

3 个答案: