Jquery mouse hover issue

1
votes

I am having a slight issue with my mouse hover function on my images. When you hover over one image it's causing the hover over state to be active with all the images. [click here][1] Does anyone know where i have gone wrong??

//javascript

$(".tint").hover(function(){
$('.hover-hide').toggleClass('hidden');
});

//HTML 

<figure class="tint">
    <div class="hover-content hover-hide hidden">
        <a class="roll-over" href="#"><img class="img_hover" src="img/home-hover-bg.png" alt="hover"/></a>
    </div>
    </figure>
3
javascriptjqueryhtml
Do all of your figures have the tint class? – Kevin Boucher
Why do you need javascript for this? This can be done with css3. – Automatico
You need to reference $(this). So something like $(this).parent().find('.hover-hide').toggleClass('hidden') – Ian Brindley

3 Answers

7
votes
$(".tint").hover(function(){
    $(this).find('.hover-hide').toggleClass('hidden');
});
1
votes

Use this to point the element that you are hovering.

$(".tint").hover(function(){
     $(this).find('.hover-hide').toggleClass('hidden');
});

In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.

0
votes

Find the div corresponding to that image:

$(".tint").hover(function(){
    $(this).children('.hover-hide').toggleClass('hidden');
});