jQuery懸停 - 將類添加到當前（活動）div元素，而不是其他人

我目前正在爲我正在開發的網站上的按鈕開發一個jQuery效果，並遇到了一個我無法解決的小問題了解如何解決。我已經寫了一個簡短的jQuery腳本來將一個類添加到按鈕元素中的div。它將一個懸停類添加到鏈接文本旁邊的箭頭，並在您將鼠標移出時將其刪除 - 非常簡單。但是，如果你看這個例子（Example），你會注意到當你將鼠標懸停在第一個按鈕上時，下列按鈕中的所有箭頭也被激活，因爲它將css類添加到該頁面上的每個元素標識符。jQuery懸停 - 將類添加到當前（活動）div元素，而不是其他人

Click here查看問題的屏幕截圖。

如何讓腳本將該類添加到div中的當前箭頭，而不是頁面上的所有其他箭頭？這是我的HTML，CSS和jQuery：

HTML

<div class="end-lft"></div> 
<a href="<?php echo BASE_URL; ?>doctors/" class="btn">Visit our Doctors page</a> 
<div class="end-rght-h"></div><!-- This is the element that has a hover class applied when a user hovers over a.btn above -->

CSS

.end-lft { 
    background: url('images/ui/page/btn-lft.jpg') no-repeat 0 0; 
    width: 4px; 
    height: 33px; 
    display: block; 
    float: left; 
    clear: left; 
} 

a.btn { 
    background: url('images/ui/page/btn-bg.jpg') repeat-x 0 0; 
    width: auto; 
    height: 33px; 
    padding: 6px 7px 0 7px; 
    display: block; 
    float: left; 
    font-size: 0.9em;  
    text-decoration: none !important; 
} 

.end-rght-h { 
    background: url('images/ui/page/btn-arrw-h.jpg') no-repeat 0 0; 
    width: 22px; 
    height: 33px; 
    display: block; 
    float: left; 
    clear: right; 
} 

.end-rght-v { 
    background: url('images/ui/page/btn-arrw-v.jpg') no-repeat 0 0; 
    width: 22px; 
    height: 33px; 
    display: block; 
    float: left; 
    clear: right; 
}

jQuery的

$(document).ready(function() { 
    $(".btn").hover(function() { 
     $('.end-rght-h, .end-rght-v').addClass("hvr");  
    },  
    function() {  
     $('.end-rght-h, .end-rght-v').removeClass("hvr");  
    }); 
});

來源

2011-06-03 Taylor T.

使用next()，如：

$(this) 
    .next() 
    .$('.end-rght-h, .end-rght-v') 
    .addClass("hvr");

來源

2011-06-03 18:08:48

而是選擇在類名，這樣做如下：

$(document).ready(function() {  
    $(".btn").hover(function() { 
     $(this).find('.end-rght-h, .end-rght-v').addClass("hvr");  
    }, function() {  
     $(this).find('.end-rght-h, .end-rght-v').removeClass("hvr");  
    }); 
});

「發現」的號召，將得到的「本」的後代（在此上下文，類爲「.btn」的對象），所以只有當前.btn中的那個會被切換。

來源

2011-06-03 18:15:26 FishBasketGordo

你正在使用一個類作爲選擇器，所以當然它會將你的新類應用於共享.end-rght-h或.end-rght-v類的所有內容。

如果你想影響一個DOM元素，您可以使用一個ID：

$('#end1').addClass(...

，或者你需要創建一個更具體的選擇：

$('.btn').hover(function() { 
    $(this).next('.end-rght-h, .end-rght-v').addClass('hvr');

來源

2011-06-03 18:18:03 csigrist

謝謝你們您的建議。我很感激你花時間回覆並提供幫助。它使我走上正軌。這是我最終使用的：

$(document).ready(function() {  
$(".btn").hover(function(){  
$('.end-rght-h, .end-rght-v',$(this).parent()).addClass("hvr");  
},  
function(){  
$('.end-rght-h, .end-rght-v').removeClass("hvr");  
}); 
});

來源

2011-06-06 10:35:52

jQuery懸停 - 將類添加到當前（活動）div元素，而不是其他人

回答

相關問題