Change hover color on nav-tabs

Question

I want to change text color of hover nav-tabs, so I named : nav nav-tabs custom, so code in my view looks like this: ```

<%= link_to "Overview", '#' %>

<%= link_to "About", '#' %>

<%= link_to "What we do", '#' %>

<%= link_to "Partners", '#' %>

<%= link_to "Contact", '#' %>

<%= link_to "Support", '#' %>

``` and code in my custom.css.scss ``` .custom a:hover {color: black;} ``` and it doesn't work. Can someone help me ?

Accepted Answer

You need to make your selector a little bit more specific to properly target your tabs. Try this:

```
.custom > li > a:hover {
    color: black;
}
```

By the way, this only changes the color of the text, if you want to change the background color of the tabs upon hover switch that `color` property to `background-color`.

Change hover color on nav-tabs

Solution

Problem