使按钮保持一种颜色，除非将鼠标悬停在上面答案

【问题标题】：Make button stay one color except when hovered over使按钮保持一种颜色，除非将鼠标悬停在上面
【发布时间】：2016-09-04 20:27:51
【问题描述】：

如何在hover 上制作一个改变颜色的按钮，然后在单击后恢复其原始颜色？

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

我以为我通过添加focus 找到了解决方案。这样，在单击按钮后，它会在焦点对准时返回其原始颜色。但是在焦点从按钮上移开之前，悬停不会改变按钮的颜色。

我还没有找到伪类或 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>

【问题讨论】：

查看代码中某处的:visited 伪类，可能是罪魁祸首... ;)
...或 javascript 中的 mouseout / hover 事件...
好主意；我没有“已访问”并尝试添加一个以查看它是否可以将按钮设置回其原始状态，但这不起作用。
我也尝试了mouseout javascript 的想法，但这似乎也不起作用。我已经相应地更新了我的原始帖子。
看看我的回答...

标签： jquery html css hover focus

【解决方案1】：

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

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

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

【讨论】：

这很好用，除了 .button:focus 而不是 .btn:focus 的轻微拼写错误。谢谢。
@SeamusMcBrown - 你已经在使用 "btn" 类和相同的 html 代码 sn-p 这就是为什么我只为你现有的 html 提供 css 解决方案。

【解决方案2】：

您在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>

一旦你这样做了，你的问题底部的代码应该可以正常工作（前提是你也正确链接到 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>

这是一个小提琴演示：https://jsfiddle.net/6wbnvy7g/

还有一件事：请注意，每次触发事件时，您都必须注意删除该类，否则您将在下次尝试时将两个类都应用到元素上将鼠标悬停在按钮上。因此，我会将您的 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');
   });
});

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

【讨论】：

感谢您的回答和示例。后一个示例在 JSFiddle 中完美运行，但在我的括号中的代码中。当我将鼠标悬停在按钮上时，尽管 CSS 另有说明，但由于某种原因，它会更改为默认的 button 灰色而不是红色。单击后，它会保持灰色，直到我将焦点从按钮上移开，类似于我之前遇到的问题。这个解决方案肯定可以帮助某人，但对我来说 zatee29 的效果最好。
哎呀，对不起，我的意思是它在 JSFiddle 中工作，但在我的括号中的代码中不是。当我在我的代码中尝试这个解决方案时，按钮的行为仍然与我原来的问题一样，因为按钮在被点击后没有恢复到原来的颜色。
所有这些东西都需要在你原来的问题中说得很清楚...想想那些第一次看到的人，他们不会在cmets中四处寻找线索...

【解决方案3】：

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

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

当然还有 html 中的按钮：

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

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

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

【讨论】：

一个人不会像某人已经回答过的那样回答他们自己的问题...将您的笔记放入您的问题或接受的答案的 cmets...如果它不完整，请不要接受它作为正确的...
Zatee29 的回答几乎是完美的，我只是觉得我可以比评论更清楚地传达最终解决方案。但是，是的，如果我考虑过，答案部分确实看起来很奇怪......
这根本不是为了它...如果您需要更完整的答案，请让回答者这样做