Question

我想使用jQuery将一些悬停css样式添加到某些按钮，我目前已经拥有它所以它添加了我想要的CSS但是当你没有悬停按钮时样式保持不变。

继承我的代码：

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

当你悬停时，它会添加这些样式，但是当你将鼠标移开时，它会保留样式，任何人都能看到我在这里做错了吗？

Answer 1

请使用以下内容：

mouseenter()
.mouseleave()

.mouseover()
.mouseout()

或尝试以下代码

工作小提琴：http://jsfiddle.net/67tCr/

Answer 2

使用这样的CSS：

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

Answer 3

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

演示： Example

Answer 4

你可以这样做：

HTML：

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

JS：

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

我建议使用class代替id。

Jquery附加悬停css样式

4 个答案: