gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 02:14:03 24 4
gpt4 key购买 nike

我有如下所示的div,它是由循环生成的。
我想在将鼠标悬停在图像上或将鼠标悬停在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它清楚地定义了我的问题是什么。

最佳答案

看到这一改变,我想你会问这个

看看

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

关于javascript - 将鼠标悬停在图像上并显示该图像的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16685920/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com