CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4137836
user4137836

Reputation:

Hide ::before on active item just while hover

I have this structure:

<nav>
    <ul>
        <li><a href="javascript:void(0)" class="menuitem active">see all projects</a></li>
        <li><a href="javascript:void(0)" class="menuitem">about</a></li>
        <li><a href="javascript:void(0)" class="menuitem">contact</a></li>
    </ul>
</nav>

When .active can be one of the three (it just hightlight the page the user is in). The problem is that I'm creating an "arrow" hightlight on .active item via ::before selector and I want that if the user hovers over any item, the ::before dissapears JUST WHILE hover.

This is how it looks:

https://i.sstatic.net/cZxPW.png

And on hover looks like this (see the problem? while hover there are two arrows now, I want the arrow just to be on the one that is hovered and hide it on the .active, after mouseout the arrow goes back to the .active one):

https://i.sstatic.net/XA2MM.png

This is my css:

header nav {
  float: right;
  font-family: 'avenir_lt_std65_medium';
  text-transform: uppercase;
  text-align: right;
  font-size: 8px;
  line-height: 12px;
  letter-spacing: 2px;
  color: #000000;
}
header nav ul li a.active::before {
  content: ">> ";
}
header nav ul li a:hover:before {
  content: ">> ";
}

Upvotes: 1

Views: 989

Answers (1)

Antoine Combes
Antoine Combes

Reputation: 1454

Would this do the trick ?

header nav {
  float: right;
  font-family: 'avenir_lt_std65_medium';
  text-transform: uppercase;
  text-align: right;
  font-size: 8px;
  line-height: 12px;
  letter-spacing: 2px;
  color: #000000;
}
nav ul li a.active::before {
  content: ">> ";
}
nav ul:hover li a::before {
  content: none;
}
nav ul li a:hover:before {
  content: ">> ";
}
<nav>
    <ul>
        <li><a class="menuitem active">see all projects</a></li>
        <li><a class="menuitem">about</a></li>
        <li><a class="menuitem">contact</a></li>
    </ul>
</nav>

Upvotes: 2

Related Questions