CSS nav link styling: remove styling of other element & remove double border when hovered on selected

debugcn Published at Dev

Joshua Ohana

I have:

A navbar (div > ul > li) with a few navigational links in it.
A border added on hover
```
.my-nav > li:hover {
    border-bottom: 0.2em solid white;
}
```
An AngularJS directive which applies the below class to whichever is the active page (using routes)
```
.active-tab {
    border-bottom: 0.2em solid white;    
    font-weight: bold;
}
```

My issues are:

If I'm on active-tab "A" and hover onto active tab "B", I want all styling removed from "A" but I have no idea how to approach.
If I hover on the active page (which already has active-tab applied to it, it doubles the thickness of the border.

Aman Dhanjal

What you need to do is use the removeClass() function on the other elements where you are adding the class in your directive.

As an example, if all other are anchor tags you could use the following code:-

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

Check out this plnkr:- http://plnkr.co/edit/Re6EAL6XRsKHqqHPq5kw?p=preview

As for your border problem, as skv said in his answer, you have set the border on both the element and hover styles. Just remove the border from hover and it'll work as you expect it to.

Collected from the Internet

Please contact [email protected] to delete if infringement.