CODEWITHSUNDEEP
jquery
Todd Reid
Todd Reid

Reputation: 31

Remove Class from div on hover

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.

Upvotes: 3

Views: 783

Answers (4)

Eli
Eli

Reputation: 14827

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/

Upvotes: 3

writeToBhuwan
writeToBhuwan

Reputation: 3281

Something like this?

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

Upvotes: 0

bipen
bipen

Reputation: 36531

use siblings() to remove class of others in click event.. updated some of your codes .. you don't need two document.ready function....

try this

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

Upvotes: 0

Smuuf
Smuuf

Reputation: 6524

Use $.toggleClass() instead of $.addClass() :)

Fiddle!

Upvotes: 0

Related Questions