CODEWITHSUNDEEP
htmlcsshovermoodle
thelara
thelara

Reputation: 175

Disabling hover effect on "active" class

I'm styling a moodle theme and put this effect on nav:

But i don't want it to appear on "Active" nav: Only appearing on server and not on appeareance

CSS:

.nav-item .nav-link {
  position: relative;
}

.nav-item .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  height: 1px;
  background: #FFFFFF;
  transition: 0.4s ease-out;
}

.nav-item .nav-link:hover::after {
  left: 0;
  width: 100%;
}

The "tree" of menu element:

Upvotes: 0

Views: 522

Answers (3)

rptfrg
rptfrg

Reputation: 113

You can use :not() to prevent a specific class from being selected.

.nav-item .nav-link:not(.active):hover::after {
  left: 0;
  width: 100%;
}

Here's an example of how to use :not()

.class {
  color: red;
}

.class:not(.bad_class) {
  color: green;
  font-weight: bold;
}
<p class="class bad_class">Hello</p>
<p class="class bad_class">Hello</p>
<p class="class">Hello</p>
<p class="class bad_class">Hello</p>

Upvotes: 1

Sampat Aheer
Sampat Aheer

Reputation: 73

You can use this CSS trick

.active.nav-link:hover::after {
  width: 0;
}

there should be no space between these two classes. It says that if an element has these two classes then what CSS should appear.

Upvotes: 0

liquidot
liquidot

Reputation: 79

Simply create another class for the other nav items and remove the :hover from the Apperance nav item

Upvotes: 0

Related Questions