Javascript jqueryhide&；显示-覆盖图像“；“运行”；我还没来得及点击它就把它拿走了_Javascript_Jquery_Css_Html_Jquery Ui

Javascript jqueryhide&；显示-覆盖图像“；“运行”；我还没来得及点击它就把它拿走了

javascript jquery css html jquery-ui

Javascript jqueryhide&；显示-覆盖图像“；“运行”；我还没来得及点击它就把它拿走了,javascript,jquery,css,html,jquery-ui,Javascript,Jquery,Css,Html,Jquery Ui,我不确定这是一个jQuery错误还是我做错了什么，但现在开始。我有一个带有缩略图的IMG元素，我希望只有当鼠标悬停在缩略图上时，才显示一个可点击的放大镜图标（另一个IMG）。在我将鼠标移到图标上单击之前，这一切都很正常。相反，图标会疯狂地来回跳动 <link href="Scripts/picpop.css" rel="stylesheet" /> <script src="Scripts/picpop.js"></script> <div clas

我不确定这是一个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 ...

更改延迟时间没有任何效果，但它看起来像是因为图标的z索引位于缩略图的前面，这就触发了底层缩略图IMG的mouseout事件。有没有什么方法可以让这个图标在你将鼠标移离缩略图时消失，但显示的时间足够长，可以点击它

这里有两个链接示例-test2是不带悬停的，test1是带悬停的（疯狂的一个）

您可以使用

.find（）

而不是

.children（）

：

在单击功能中

因此，最终代码可以这样使用：

$(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
};

$（文档）.ready（函数（）{
var parentDIV=“；//在经过长时间调试后获得了该区域
请注意，您正在使用$（.smImg）悬停事件和mousein&mouseout函数
您正在使用zImg类在图像顶部添加另一个图像
现在，当您继续zImg的悬停时，会调用smImg的hoverout事件，因此zImg会反弹并关闭
解决这个问题的办法是，你有两个都不用
   $('.smImg').hover 

smImg事件而不是使用父div hover事件
  $('.bigDiv').hover 

并根据它更改代码
希望这有助于跟踪逻辑错误
这里有一个有效的最终解决方案（针对那些需要它的人）
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
};

$(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
    };

和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>







希望这能帮助除我之外的其他人（对jQuery来说完全是noob）好的，bigDiv是容器，hover将为其中的所有内容（这是全部3幅图像）开火。也许可以包装zImg（放大镜图标）在一个DIV中？大DIV w/hover做了我所怀疑的事情-不去那里。我在原始编辑上放了两个示例链接。问题在于hover-它是一个mouseover和mouseout中的两个事件。我会尝试将其拆分。我希望以前做过这件事的人能够插话，但感谢这里的帮助。好的，我不再需要其他的了悬停（此处未显示），我使用bigDiv悬停并更改了CSS，使DIV是“内联”的，zImg的位置是相对的。
  $('.bigDiv').hover 

$(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
    };

.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;*/
}

<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>