Question

当元素共享同一个类时，我有一个问题是使用jquery应用hover。当使用CSS时，这非常好，但只要JQuery出现，它就会改变一切。

CSS

.btn {
background:#ccc;
padding:10px;
}
.btn:hover {
background:red;
padding:10px;
}

HTML

<a class="btn">Button 1</a><br /><br /><br />
<a class="btn">Button 2</a><br /><br /><br />
<a class="btn">Button 3</a><br /><br /><br />

<div id="paragraph"><p>Everything works fine with normal css Hover...</p></div>

<input type="button" id="btnchange" value="Change to JQuery Hover, blue color" />

JQuery的

$('#btnchange').bind('click', function() {

                $(".btn").hover(function(){
                $(".btn").css({background: "blue"});
                },function(){
                $(".btn").css({background: "#ccc"});
                }); 

                $("#paragraph").html('<p>But then, when applying jquery hover, things work unexpectedly</p>');

});

这是实时Fiddle

我不必修改HTML代码，只需修改JQuery。

Answer 1

Revised jsFiddle

jQuery代码，就像你编写的那样，选择类“btn”的所有元素并将它们全部变为蓝色。您只需选择触发悬停事件的元素并将其变为蓝色。因此，

改变这个：

$('.btn').css({background: "blue"});

到此：

$(this).css({background: "blue"});

Answer 2

使用悬停功能中的$(this)选择器来定位实际的悬停元素：

$(".btn").hover(function(){
   $(this).css({background: "blue"});
},function(){
   $(this).css({background: "#ccc"});
});

Answer 3

将悬停内的".btn"更改为$(this)

JQuery Demo

$('#btnchange').bind('click', function() {

                    $(".btn").hover(function(){
                    $(this).css({background: "blue"});
                    },function(){
                    $(this).css({background: "#ccc"});
                    }); 

                    $("#paragraph").html('<p>But then, when applying jquery hover, things work unexpectedly</p>');

});

当元素共享同一个类时，使用jquery应用悬停的问题

3 个答案: