CODEWITHSUNDEEP
jquerycsshovertoggleclass
Nils Karlsson
Nils Karlsson

Reputation: 51

Adding a toggleClass on Click function, how to add a new hover with it?

hope you guys have a great day so far, still learning jquery here, I have a problem and if anyone feels like helping out it would be great,

I have a list with a class called "nav" see HTML below, when I click on the 5th child on this list I have added a toggleClass to this list so the text color changes from white to black, this is due to a new background-color I've added, the problem is, I have a css hover on this list that makes the text black on hover, see css below, and I want this hover to change temporarily with my toggleClass with a text-color change, so I toggle a class on click called "active2" and then also set a hover state on "active2", the toggle class works but not the hover state. How do you make this work, so the hover also changes, anyone? 

$(".nav li:nth-child(5)").click(function() {
  $(".nav li").toggleClass("active2");
});
.nav li:hover {
  color: #000;
}
.active2 {
  color: #000;
}
.active2:hover {
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li>Test1</li>
  <li>Test2</li>
  <li>Test3</li>
  <li>Test4</li>
  <li>Test5</li>
</ul>

Upvotes: 1

Views: 59

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388406

The problem is css specificity, just redefine the hover rule with a more specific one

$(".nav li:nth-child(5)").click(function() {
  $(".nav li").toggleClass("active2");
});
.nav li:hover {
  color: #000;
}
.nav .active2 {
  color: #000;
}
.nav .active2:hover {
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li>Test1</li>
  <li>Test2</li>
  <li>Test3</li>
  <li>Test4</li>
  <li>Test5</li>
</ul>

Upvotes: 1

Related Questions