Jquery附加悬停css样式

我想使用jQuery将一些悬停css样式附加到一些按钮上，我现在有它，所以它会添加我想要的css，但是当你不悬停按钮时，样式会保留下来

这是我的密码：

                $('#all').hover(function() {
                    $('#all').css({backgroundColor: '#3DC0F1', color: '#ffffff'});
                })

当您悬停时，它会添加这些样式，但当您将鼠标移开悬停时，它会保留这些样式，有人能看到我在这里做错了什么吗？

请使用以下命令：

mouseenter()
.mouseleave()

.mouseover()
.mouseout()

或者试试下面的代码

工作小提琴：

像这样使用CSS：

 #all:hover {
    backgroundColor:#3DC0F1;
    color: #ffffff
   }

演示：

---

您好，您可以这样做：

HTML:

---

我建议使用class而不是id。

Hi，我有这个设置，但因为我使用jQuery设置其他css样式，现在似乎允许我的css悬停状态ok如果你只想在jQuery中这样做，那么使用@Mohit Arora answer只需使用纯css即可：

$('#all').hover(function() {
                $('#all').css({backgroundColor: '#3DC0F1', color: '#ffffff'});
      },function(){
              //remove style here
           $('#all').removeAttr("style");
 });

<button class="all">a</button>
<button class="all">b</button>
<button class="all">c</button>

$(document).ready(function(){
$('.all').hover(function() {
                    $('.all').css({backgroundColor: '#3DC0F1', color: '#ffffff'});
                });
    $('.all').mouseout(function() {
                    $('.all').removeAttr('style');
                });
});