Note that there are some explanatory texts on larger screens.

plurals
  1. POHover at image and show link at that image
    text
    copied!<p>I have div in the manner as shown below which are generated by loop.<br> I want to show that <code>quick</code> <code>div</code> at hovering over the <code>image</code> or hovering <code>over the div</code> but when I hover it shows div all over the other divs. Any suggestion please.</p> <pre><code>&lt;div class="box-product"&gt; &lt;div&gt; &lt;div class="image"&gt;&lt;a href=""&gt;test 1&lt;img src="image.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="quick" style="display: none;"&gt;Quick Look&lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;div class="image"&gt;&lt;a href=""&gt;test 2&lt;img src="image.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="quick" style="display: none;"&gt;Quick Look&lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;div class="image"&gt;&lt;a href=""&gt;test 3&lt;img src="image.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="quick" style="display: none;"&gt;Quick Look&lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;div class="image"&gt;&lt;a href=""&gt;test 4&lt;img src="image.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="quick" style="display: none;"&gt;Quick Look&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>This is my jQuery </p> <pre><code>$(function () { $(".box-product div").each(function () { $(".image").mouseenter(function () { $(".quick").show(); }); $(".image").mouseout(function () { $(".quick").hide(); }); }); }); </code></pre> <p>I have created a <a href="http://jsfiddle.net/husnainahmed/5unMB/13/" rel="nofollow">jsfidle</a> which clearly defines what is my question.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload