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

您可以使用.find()代替.children()：

var parentDIV = ""; //<---decalare vars here
var zImg = "";      // <---and here

$('.smImg').hover(function () {
   parentDIV = $(this).parent();
   zImg = parentDIV.find(".zImg");
   zImg.show('fast');
}, function () {
   zImg.hide('slow');
});

我觉得$(zImg)你不应该把它包装成jQuery对象，它已经是一个jQuery对象，所以像这样使用zImg.show。

这也是：

bigImg.length

点击功能中的

。

所以你可以用这种方式使用最终代码：

$(document).ready(function () {
   var parentDIV = ""; //<---decalare vars here
   var zImg = "";      // <---and here
   $(".zImg").click(function () {
     parentDIV = $(this).parent();
     var bigImg = parentDIV.find(".bigImg");

     // 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)" }); 
        newImgElem.appendTo(parentDIV);
     }
   });

   $('.smImg').hover(function () {
       parentDIV = $(this).parent();
       zImg = parentDIV.find(".zImg");
       zImg.show('fast');
   }, function () {
       parentDIV = $(this).parent();
       zImg = parentDIV.find(".zImg");
       zImg.hide('slow');
   });

});


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

Answer 2

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

看到你正在使用带有mousein＆amp;的$（.smImg）悬停事件mouseout功能

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

现在当你继续zImg的悬停时，调用smImg的hoverout事件，因此zImg反弹＆amp;关闭。

这个问题的解决方案是你们两个都不使用

   $('.smImg').hover

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

  $('.bigDiv').hover

并根据它更改您的代码

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

Answer 3

这是一个有效的最终解决方案（对于那些需要它的人）。

使用Javascript：

$(document).ready(function () {
    var parentDIV = "";
    var zImg = "";  
    $(".zImg").click(function () {
        parentDIV = $(this).parent();
        var bigImg = parentDIV.find(".bigImg");

        // 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)" });
            newImgElem.appendTo(parentDIV);
        }
    });

    $('.bigDiv').hover(function () {
        zImg = $(this).find(".zImg");
        //zImg.css("visibility", "visible");
        zImg.show('slow');    
    }, function () {
        zImg = $(this).find(".zImg");
        //zImg.css("visibility", "hidden");
        zImg.hide('fast');
    });

});

    function clearimgsrc(elem) {
       $(elem).parent().find(".zImg").hide();
       $(elem).remove();  // get rid of the IMG tag completely
    };

CSS：

.bigDiv
{
    display: inline;
}

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

.bigImg
{
    padding: 5px;
    border: 1px solid #C0C0C0;
    width: 480px;
    height: 480px;
    cursor: pointer;
    cursor: zoom-out;
    position: absolute;
    margin-left: -350px;
    margin-top: -130px;
    z-index: 200;
    background-color: #FFFFFF;
}

.zImg
{
    width: 44px;
    height: 44px;
    cursor: pointer;
    cursor: zoom-in;
    position: relative;
    margin-left: -50px;
    display: none;
    /*visibility: hidden;*/
}

和HTML：

<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/MagIconPlus1smT.png" 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/MagIconPlus1smT.png" alt="" class="zImg" data-large-src="images/products/prodlarge/TL-AdornCB-Fustic.jpg" title="Click Here To Zoom" />
</div>

希望这能帮助除了我以外的其他人（job的总菜单）

jQuery hide＆amp; show - 叠加图像“运行”之前我可以点击它

3 个答案: