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
Post a Comment