Question

我基本上希望按钮保持悬停css样式而不管其他所有活动，而不是回到正常样式。请帮忙！

$(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

正如评论中提到的那样，你应该使用类而不是计数器和：hover选择器。以下是我认为你应该做的事情：

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

然后在CSS中，使用.menu .hover：

创建一个样式

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

Answer 2

如果你想使用CSS留下悬停的颜色，那么你需要使用:visited :visited是一个伪类选择器，它可以改变锚链接上的一些样式{{ 1}}。所以你不能用于(a)。

但您可以像li和.main-nav ul li.menu a {}

一样使用

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

Answer 3

此解决方案使用Jquery手动添加和删除CSS中的一个类，然后CSS接收。这是你想要的吗？

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;

}

快乐编码：）

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

3 个答案: