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


hope guys have great day far, still learning jquery here, have problem , if feels helping out great,

i have list class called "nav" see html below, when click on 5th child on list have added toggleclass list text color changes white black, due new background-color i've added, the problem is, have css hover on list makes text black on hover, see css below, , want hover change temporarily toggleclass text-color change, toggle class on click called "active2" , set hover state on "active2", toggle class works not hover state. how make work, hover 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>

the problem css specificity, redefine hover rule 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>


Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

reactjs - React router and this.props.children - how to pass state to this.props.children -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -