從DIV懸停

Question

刪除類我在jQuery的一個小白，並已受挫的地獄試圖讓下面的工作。我相信這是一件簡單的事情，一位有經驗的開發人員會馬上拿起。

我在頁面上的其他的div在1名列表的菜單和列表。當用戶懸停在菜單上時，列表中的項目將被突出顯示。我有這麼多。但是因爲列表很長，我需要一個點擊事件來在用戶向下滾動頁面時突出顯示這些項目。

沒關係。但是我不知道如何在用戶通過菜單中的下一個項目時從高亮顯示的項目中刪除點擊類。

$('#buttons li').hover(function() { 
    $('.item-' + this.className).addClass('clients-hover'); 
}, 
function() { 
    $('.item-' + this.className).removeClass('clients-hover'); 
}); 
$(function() { 
    $('#buttons li').click(function() { 
    $(this).addClass('clients-hover'); 
    }); 
}); 

例如，在下面的撥弄，當在藝術家/樂隊中的div項點亮，但是當用戶懸停在喜劇演員，在該類中的項目被高亮顯示，並且用戶將鼠標懸停或點擊藝術家/樂隊恢復正常。

http://jsfiddle.net/toddyhotpants/RCMaP/4/

這是它在頁面上（不點擊事件）： http://whitesky.com.au/clients/

在此先感謝。

Answer 1

，而不是$ .addClass（）:)

Fiddle!

Answer 2

只是刪除類使用$.toggleClass()點擊的元素的其他兄弟姐妹的clients-hover：

$(this).addClass('clients-hover').siblings().removeClass('clients-hover'); 

演示：http://jsfiddle.net/RCMaP/6/

---

基於您的評論，只需要修改代碼時懸停在菜單導航：

$('#buttons li').hover(function() { 
    $('.item-' + this.className).addClass('clients-hover') 
    .parent().siblings().children().removeClass('clients-hover'); 
}, 

function() { 
    $('.item-' + this.className).addClass('clients-hover'); 
}); 

演示：http://jsfiddle.net/RCMaP/12/

Answer 3

使用siblings()去除click事件類他人..更新您的一些代碼..你並不需要兩個功能的document.ready ....

試試這個

$('#buttons li').hover(function() { 
    $("div[class^='item']").removeClass('clients-hover'); //<--here removesclass from all div 
    $('.item-' + this.className).addClass('clients-hover'); 
}, 

$(function() { 
    $('.item-' + this.className).removeClass('clients-hover'); // moved for other document.ready function 
    $('#buttons li').click(function() { 
    $(this).siblings().removeClass('clients-hover'); //<--- here remove class from other li 
    $(this).addClass('clients-hover'); 
    }); 
}); 

fiddle here

Answer 4

像這樣的事情？

$('#buttons li').hover(function() { 
    $('.item-' + this.className).addClass('clients-hover'); 
    }, 
    function() { 
    $('.item-' + this.className).removeClass('clients-hover'); 
}); 

$(function() { 
    $('#buttons li').click(function() { 
     $("[class^=item]").not($('.item-' + this.className)).removeClass('clients-hover'); 
     $(this).addClass('clients-hover'); 
     $(this).siblings().removeClass('clients-hover'); 
     $('.item-' + this.className).addClass('clients-hover'); 
    }); 
});