从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'); 
    }); 
});