jQuery悬停，只有活动元素

Question

我有多个元素与类测试。如果我徘徊，他们应该有一个红色的边框，因为我用div包裹它们。它的工作原理是什么，但是如何才能包装活动元素，我徘徊的那个，而不是所有具有.test类的元素？

$(".test").hover(function() { 
$(".sample").wrap('<div style="border: 1px solid red;" />'); 
} 

Answer 1

我不知道这是否是你正在寻找什么，但是这会将所有启用的元素与类测试一起包装起来。

$(".test:enabled").hover(function() { 
    $(this).wrap('<div style="border: 1px solid red;" />'); 
}); 

Answer 2

您应该在函数中使用$（this）。 $（this）将引用当前悬停的元素。

$(".test").hover(function() { 
    $(this).wrap('<div style="border: 1px solid red;" />'); 
}); 

Answer 3

使用$（本）

$(".test").hover(function() { 
$(this).wrap('<div style="border: 1px solid red;" />'); 
} 

Answer 4

如果我理解正确的话，要在当前悬停的项目中只选择。样品。如果是这样，请参阅this question。 JQuery接受第二个参数。

$(".test").hover(function() { 
    $(".sample",this).wrap('<div style="border: 1px solid red;" />'); 
} 

Answer 5

这将是一个更明显的如何帮助，如果你包括你的HTML。我将假定class="sample"的对象是父对象。

$(".test").hover(function() { 
$(this).closest(".sample").wrap('<div style="border: 1px solid red;" />'); 
}); 

当您停止悬停或放置代码而不是一遍又一遍地包裹它时，您当然需要解开这个。

这将是更好，如果你使用现有对象边界，只是改变悬停类或样式，unhover。因为我不知道你的HTML是什么，我只能猜测可能被用于什么：

$(".test").hover(function() { 
    $(this).addClass("active"); 
}, function() { 
    $(this).removeClass("active"); 
}); 

而且，当时有一个CSS规则：

.active {border: 1px solid red;}