將鼠標懸停在圖片上並在該圖片上顯示鏈接

Question

我有如下所示的方式由循環產生的股利。
我想over the div鼠標懸停在image或over the div鼠標懸停over the div時顯示該quick div ，但是當我將其懸停時，它將在所有其他div上顯示div。 請提出任何建議。

<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>

這是我的jQuery

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

我創建了一個jsfidle ，它清楚地定義了我的問題。

Answer 1

看到改變，我想你問一個

看着

$(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

請嘗試以下操作：

$('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

我認為您需要更改HTML以包含嵌套的div：

<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>

然后，您可以通過以下方式更改jQuery：

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

看看jsFiddle： http : //jsfiddle.net/hus​​nainahmed/5unMB/13/

Answer 4

試試這個腳本：

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