javascript - jQuery 隐藏和显示 - 在我单击它之前覆盖图像 "runs"

Question

我不确定这是一个 jQuery 错误还是我做错了什么，但这里是。 我有一个带有缩略图的 IMG 元素，并且我希望仅当鼠标悬停在缩略图上时才显示可点击的放大镜图标(另一个 IMG)。 这工作正常，直到我将鼠标移到点击图标上。相反，图标疯狂地跳进跳出。

<link href="Scripts/picpop.css" rel="stylesheet" />
<script src="Scripts/picpop.js"></script>
<div class="bigDiv">
    <img src="images/products/prodmedium/TC-Chelsea-Mushroom2.jpg" alt="" class="smImg">
    <img src="Images/magglass.gif" alt="" class="zImg" data-large-src="images/products/prodlarge/TC-Chelsea-Mushroom2.jpg"  title="Click Here To Zoom"/>
</div>
<br />
<br />
<div class="bigDiv">
    <img src="images/products/prodmedium/TL-AdornCB-Fustic.jpg" alt="" class="smImg">
    <img src="Images/magglass.gif" alt="" class="zImg" data-large-src="images/products/prodlarge/TL-AdornCB-Fustic.jpg" title="Click Here To Zoom" />
</div>
... and so forth ...

jQuery/javascript:

$(document).ready(function () {

$(".zImg").click(function () {
    var parentDIV = $(this).parent(); //get the parent container (DIV) for this specific moused-over element
    var bigImg = parentDIV.children(".bigImg"); //now get the child IMG element from the parentDIV (for the large image) that will be or is already created

    // if the large image IMG element does not already exist, create it
    if ($(bigImg).length == 0) {
        var bigImagePath = $(this).attr("data-large-src");
        var newImgElem = $("<img />");
        newImgElem.attr({ "src": bigImagePath, "class": "bigImg", "title": "Click On Image To Close", "onclick": "clearimgsrc(this)" }); //add the attributes and an onclick event 
        newImgElem.appendTo(parentDIV);
    }
});
// strange - the following just goes nuts
$('.smImg').hover(function () {
    var parentDIV = $(this).parent();
    var zImg = parentDIV.children(".zImg");
    $(zImg).show('fast');
}, function () {
    var parentDIV = $(this).parent();
    var zImg = parentDIV.children(".zImg");
    $(zImg).hide('slow');
});

});


function clearimgsrc(elem) {
    $(elem).remove();  // get rid of the IMG tag completely
};

CSS:

.smImg
{
    width: 220px;
    height: 220px;
}

.bigImg
{
    width: 480px;
    height: 480px;
    cursor: pointer;
    cursor: zoom-out;
    position: absolute;
    margin-left: -350px;
    margin-top: -130px;
    z-index: 200;
}

.zImg
{
    width: 28px;
    height: 44px;
    cursor: pointer;
    cursor: zoom-in;
    z-index: 100;
    position: fixed;
    margin-left: -28px;
    margin-top: 176px;
    display: none;
}

更改延迟时间没有任何效果，但看起来是因为图标的 z-index 位于缩略图前面，这会触发底层缩略图 IMG 的 mouseout 事件。有什么方法可以使它工作，以便当您将鼠标从缩略图移开时图标消失，但显示的时间足以单击它吗？

这里有 2 个示例链接 - test2 没有悬停，test1 有悬停(疯狂的那个)

Test2.htm

Test1.htm

Answer 1

经过长时间的调试得到了这个区域

看到你正在使用 $(.smImg) 悬停事件和 mousein & mouseout 函数

您正在使用 zImg 类在图像顶部添加另一幅图像。

现在，当您继续悬停 zImg 时，会调用 smImg 的 hoverout 事件，因此 zImg 弹回和关闭。

这个问题的解决办法就是你们两个都不要用

   $('.smImg').hover 

smImg 事件而不是它使用父 div 悬停事件

  $('.bigDiv').hover 

并根据它修改你的代码

希望这有助于追查逻辑错误