Search code examples
jqueryhtmlcssjquery-hover

Changing current image on hover with jQuery

I have a showcase on my new website which I am building at the moment. When hovering over an image at the showcase I want to give it some jQuery effects. I give the current item I hover over an extra class. Then I give another class within the hover class the action to slide down. View my code below.

$(".itemContainer").hover(
  function () {
    $(this).addClass('itemHover');
  }, 
  function () {
    $(this).removeClass('itemHover');
  }
 );

$('.image-hover-over').mouseover(
  function () {
    $('.itemHover .image-hover-bg').slideDown();
  }
);

The problem is that at the second mouseover it seems like he doesn't recognize the .itemHover yet. Because when I do the following it works, but for all items.

$('.image-hover-bg').slideDown();

After that it seems to work also with the .itemHover, but the first time it doesn't and I tried a lot and searched the web but couldn't get any useful tips.

Could anyone tell me how I can give the item I am hovering some effects?

Solution

  • You should do the slideDown() in the hover() handler. You don't have to define a handler for mouseover.