Jquery mouse hover issue

Question

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>

Answer 1

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

Answer 2

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.

Answer 3

Find the div corresponding to that image:

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