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.

Did you consider using pure CSS? See here: http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css — Medo42, May 22 '13 at 07:40

score 1 · Answer 1 · answered May 22 '13 at 10:16

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/

score 0 · Answer 2 · answered May 22 '13 at 07:38

0

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/

answered May 22 '13 at 07:38

DextrousDave

6,603
35
91
134

Really a helpful answer. I did it with css and it worked like I desire :) Thanks for your help. – Husnain Ahmed May 22 '13 at 10:36

score 0 · Answer 3 · answered May 22 '13 at 07:41

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/

score 0 · Accepted Answer · answered May 22 '13 at 07:45

Try this script:

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

Hover at image and show link at that image

4 Answers4