使按钮保持一种颜色，除非悬停在上面

Question

我如何制作一个按钮，它可以在 hover 上改变颜色，然后在 return 上单击它后又恢复到原来的颜色？

问题是我的按钮以红色渐变开始，然后在悬停时改变颜色，然后在点击后变成白色。但我希望它在被点击后 return 变成红色，而不是白色。

我以为我通过添加 focus 找到了解决方案。这样，单击按钮后，它会 return 在焦点对准时恢复为原来的颜色。但随后悬停不会改变按钮的颜色，直到焦点从按钮上移开。

我还没有找到伪类或 javascript 的组合来使此按钮保持红色，除非它悬停在上面。

编辑

根据 @webeno 的评论，我删除了 CSS 并尝试使用此 javascript 的新方法，但该按钮继续以其默认样式工作。（在此示例中，颜色为蓝色，悬停时为红色。）

<button class = "btn">Go</button>        
<script>     
.red {background-color: #f00;
     }     

.blue {background-color: #00f;
      } 

$(document).ready(function(){
   $('.btn').mouseover(function(){
      $(this).addClass('red');
   }).mouseout(function(){
      $(this).addClass('blue');
   });
});
</script>

Answer 1

您在 script 标签内添加了 CSS 定义，这显然是不正确的。您应该将它放在 style 标签下的 head 部分，或者放在单独的 .css 文件中并在 head.

中引用它

所以...

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

...或...

<head>
    <style>
        /* Your CSS rules come here */
    </style>
</head>

一旦你这样做了，你问题底部的代码应该可以正常工作（前提是你 link 到 jQuery 也正确，就像你对你的样式表一样，如上所示).

这里是完整的：

<head>       
  <style>     
    .red {background-color: #f00;}     
    .blue {background-color: #00f;} 
  </style>
  <script>
    $(document).ready(function(){
      $('.btn').mouseover(function(){
        $(this).addClass('red');
      }).mouseout(function(){
        $(this).addClass('blue');
      });
    });
  </script> 
</head>
<body>
  <button class = "btn">Go</button>
</body>

这是一个 fiddle 演示：https://jsfiddle.net/6wbnvy7g/

还有一件事：请注意，每次触发事件时您都必须注意删除 class，否则您最终会同时应用两个 class下次您尝试将鼠标悬停在按钮上时，将鼠标悬停在元素上。因此，我会将您的 jQuery 代码更改为以下代码之一：

$(document).ready(function(){
   $('.btn').mouseover(function(){
      $(this).removeClass('blue');
      $(this).addClass('red');
   }).mouseout(function(){
      $(this).removeClass('red');
      $(this).addClass('blue');
   });
});

或者更简单，使用jQuery的.hover函数：

$(document).ready(function(){
   $('.btn').hover(function(){
      $(this).removeClass('blue');
      $(this).addClass('red');
   }, function(){
      $(this).removeClass('red');
      $(this).addClass('blue');
   });
});

这是该版本的更新 fiddle：https://jsfiddle.net/6wbnvy7g/2/

Answer 2

在鼠标悬停时更改颜色的最佳方法是使用 CSS。

.btn, .btn:focus, .btn:active {background-color: #00f;}

.btn:hover {background-color: #f00;}

Answer 3

适用于我的代码的解决方案是遵循 zatee29 的回答，将其放在 css:

.btn, .btn:focus, .btn:active {background-color: #00f;}
.btn:hover {background-color: #f00;}

当然还有 html 中的按钮：

<button class = "btn">Go</button>

结果完全符合预期。该按钮开始为蓝色，悬停时变为红色，然后 returns 变为蓝色。

请注意，webeno 的第二个解决方案在 JSFiddle 中提供了相同的功能，但我不明白为什么它在我现有的程序中不起作用。

使按钮保持一种颜色，除非悬停在上面

Make button stay one color except when hovered over

html

css

jquery

focus

hover