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;}