Remove Class from div on hover

Question

I am a noob at jquery and have been frustrated as hell trying to get the following to work. I am sure it is something simple that an experienced developer would pick up straight away.

I have a menu in 1 list and lists in other divs on the page. When the user hovers over the menu, items in the lists are to be highlighted. I have got this far. But because the lists are long, I need a click event to also highlight the items while the user scrolls down the page.

That's ok. But I cannot work out how to remove the click class from the highlighted items when they user over over the next item in the menu.

$('#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');
  });
});

For example, in the fiddle below, when the User hovers or clicks on Artists/Bands the items in the divs light up, but when the user hovers over Comedians, the items in that class are highlighted and the Artists/Bands return to normal.

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

This is it on the page (without the click event): http://whitesky.com.au/clients/

thanks in advance.

Answer 1

Just remove class clients-hover of other siblings of clicked element:

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

Demo: http://jsfiddle.net/RCMaP/6/

---

Based on your comment, just need to modify your code when hover on the menu nav:

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

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

Demo: http://jsfiddle.net/RCMaP/12/