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/husnainahmed/5unMB/13/

Answer 4

试试这个脚本：

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

将鼠标悬停在图像上并显示该图像的链接

4 个答案: