Hover at image and show link at that image

Question

I have div in the manner as shown below which are generated by loop.
I want to show that quick div at hovering over the image or hovering over the div but when I hover it shows div all over the other divs. Any suggestion please.

<div class="box-product">
    <div>
        <div class="image"><a href="">test 1<img src="image.jpg" /></a>
        </div>
        <div class="quick" style="display: none;">Quick Look</div>
    </div>
    <div>
        <div class="image"><a href="">test 2<img src="image.jpg" /></a>
        </div>
        <div class="quick" style="display: none;">Quick Look</div>
    </div>
    <div>
        <div class="image"><a href="">test 3<img src="image.jpg" /></a>
        </div>
        <div class="quick" style="display: none;">Quick Look</div>
    </div>
    <div>
        <div class="image"><a href="">test 4<img src="image.jpg" /></a>
        </div>
        <div class="quick" style="display: none;">Quick Look</div>
    </div>
</div>

This is my jQuery

$(function () {
    $(".box-product div").each(function () {
        $(".image").mouseenter(function () {
            $(".quick").show();
        });
        $(".image").mouseout(function () {
            $(".quick").hide();
        });
    });
});

I have created a jsfidle which clearly defines what is my question.

Answer 1

see that for the change i think you ask that one

look at

$(function () {
$(".box-product div").each(function () {
    $(".image").mouseenter(function(){
       $(this).parents().eq(0).find(".quick").show();
    });
    $(".image").mouseout(function(){
       $(this).parents().eq(0).find(".quick").hide();
    });
});});

http://jsfiddle.net/5unMB/19/

Answer 2

Try the following:

$('div.image').each(function(){
       $(this).on('hover',function(){
          $('div.quick').css('display','none');
          $(this).next().css('display','block');
       });                    
});

http://jsfiddle.net/5unMB/18/

Answer 3

I think you need to change your html to contain nested divs:

<div class="box-product">
 <div class="image"><a href="">test 1<img src="image.jpg" /></a>
<div class="quick" style="display: none;">
    Quick Look
    </div>
</div>

 <div class="image"><a href="">test 2<img src="image.jpg" /></a>
<div class="quick" style="display: none;">
    Quick Look
    </div>
</div>

 <div class="image"><a href="">test 3<img src="image.jpg" /></a>
<div class="quick" style="display: none;">
    Quick Look
    </div>
</div>

 <div class="image"><a href="">test 4<img src="image.jpg" /></a>
<div class="quick" style="display: none;">
    Quick Look
    </div>
</div>
</div>

Then you can change your jQuery at the following way:

$(function () {
    $(".box-product div").each(function () {
        $(".image").mouseenter(function(){
           $(this).find('.quick').show();
        });
        $(".image").mouseout(function(){
           $(this).find('.quick').hide();
        });
    });
  });

look at the jsFiddle: http://jsfiddle.net/husnainahmed/5unMB/13/

Answer 4

Try this script:

$(function () {
    $(".image").each(function () {
        $(this).mouseenter(function () {
            $(this).parent().find(".quick").show();
        });
        $(this).mouseout(function () {
            $(this).parent().find(".quick").hide();
        });
    });
});