Question

如何在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>

Answer 1

您在script标记内添加了CSS定义，这显然是不正确的。您应该将其放在head标记下的style部分或单独的.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/

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>

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

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

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

3 个答案: