javascript - 悬停在图像上并在该图像上显示链接

Question

我以如下所示的方式拥有 div ，它们是由循环生成的。
我想quick div在悬停image或悬停时显示这一点，over the 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();
        });
    });
});