javascript - 为什么盒子立即消失？

我想将鼠标悬停在coverImg上，然后显示coverInfo

coverInfo显示图像的标题和描述

然后coverInfo确实显示

但我希望当鼠标悬停在其自身上时，coverInfo保持可单击状态

但它立即消失。

那我错过了什么呢？

HTML

<div class="workshop_img">
    <div class="coverInfo"></div>
        <a href="#">
            <span class="coverImg" style="background-image:url('images/work/show1.jpg')" title="Chictopia  "></span>
        </a>

CSS：

.coverInfo {
    position:absolute;
    width: 200px;
    height:200px;
    background:rgba(0,0,0,0.5);
    top:30%;
    left:30%;
    display:none;
}

看到j​​Query代码

$(function() {

            $(".coverImg").each(function() {
                //make the background image move a little pixels
                $(this).css({
                    'backgroundPosition' : "-40px 0"
                }).mouseover(function() {
                    $(this).stop().animate({
                        'backgroundPosition' : " -20px -60px "
                    }, {
                        duration : 90
                    });

                    //shwo the info box
                    var content = $(this).attr("title");
                    $("<div class='coverInfo'></div>").text(content).prependTo($(this).parent()).fadeIn("fast");

                }).mouseout(function() {
                    $(this).stop().animate({
                        'backgroundPosition' : "-40px 0"
                    }, {
                        duration : 200,
                    });
                    $(this).parent().find(".coverInfo").stop().fadeOut("fast");
                })
            })
        });

        </div>

编辑：

我已经搜索了很多东西，找到了类似的东西，我把它们和下面给出的答案一起解决了我的问题，这是代码：

$(function() {

            $(".coverImg").css({
                'backgroundPosition' : "-40px 0"
            }).mouseenter(function() {
                var box = $(this).parents(".workshop_img").find(".coverInfo");
                var content = $(this).attr("title");
                var info = box.text(content);
                    $(this).stop().animate({
                        'backgroundPosition' : " -20px -60px "
                    },90);
                    info.show();

                }).mouseleave(function() {
                    var box = $(this).parents(".workshop_img").find(".coverInfo");
                    var content = $(this).attr("title");
                    var info = box.text(content);
                    $(this).stop().animate({
                        'backgroundPosition' : "-40px 0"
                    },200);
                    info.stop().hide();
                });
        });

它只是干净的，但是不能正常工作。
有什么问题？

最佳答案

新框立即显示，因为它最初并未标记为隐藏。 .fadeIn()仅淡入最初未显示的内容。

您可以使它最初不可见，如下所示：

$("<div class='coverInfo'></div>").text(content).hide().prependTo($(this).parent()).fadeIn("fast");

您也可以摆脱使用的.each()迭代器。不用了您可以使用：

$(".coverImg").css(...).mouseover(...).mouseout(...);

您根本不需要.each()。

我还建议您使用.hover(fn1, fn2)而不是.mouseover(fn1)和.mouseout(fn2)。

而且，看起来您正在创建一个新对象，并将其插入每个鼠标悬停事件中，以便多个此类对象将堆积在页面中。您应该在mouseout函数中使用.remove()对象，或者应该重新使用先前存在的元素（如果该元素存在于该元素中），而不是创建越来越多的对象。

有时，当您使用事件进行鼠标悬停并且还要更改页面时，对页面的更改可能会导致元素失去鼠标悬停，从而将更改隐藏到页面上，然后又重新开始。我无法确定这是否在您的情况下发生（我需要一个有效的示例来进行观察），但似乎有可能。

关于javascript - 为什么盒子立即消失？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9029847/