我怎样才能制作一个按钮保持聚焦的CSS样式，直到我再次点击它

Question

I basically want the button to stay with the hover css style regardless of every other activity instead of going back to the normal style. Please help out!

 $(function() { var clickCount = 0; $('.menu').click(function() { if (clickCount % 2 == 0) { //do when open $('#css-menu').css({right: '0'}); }else{ //do when closed $('css-menu').css({right: '-340px'}); } clickCount++; }); }); 

 .main-nav ul li.menu { } .main-nav ul li.menu:after { } .main-nav ul li.menu:hover:after { } 

 <li class='menu' title='Menu'></li> 

Answer 1

As it was mentionned in the comments, you should work with classes instead of a counter and the :hover selector. Here is what I think you should do :

$(function() {
  $('.menu').click(function() {
        if ($(this).hasClass("hover")) {
         $(this).removeClass("hover");
    }else{
         $(this).addClass("hover");
     }
});

Then in your CSS, create a style with .menu .hover :

.main-nav ul li.menu .hover {}

Answer 2

If you wanted to stay hovered color using CSS then you need to use :visited :visited is a pseudo-class selector that can change some of the styling on an anchor link (a) . So you can't use for li .

but you can use like this .main-nav ul li.menu a {} and .main-nav ul li.menu a:hover, .main-nav ul li.menu a:visited, .main-nav ul li.menu a:active {}

jsfiddle: https://jsfiddle.net/L1utc1o8/11/

Answer 3

This solution uses Jquery to manually add and remove a class from a button witch the CSS then picks up. Is this what you wanted?

html

<button id="button" onclick="myFunction()"> select </button>

js

function myFunction() {
   if($( "#button" ).hasClass( "hover" )){
      $( "#button" ).removeClass( "hover" )
   }
   else{
      $( "#button" ).addClass( "hover" );
   }
}

css

.hover{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;

}

Happy Coding :)