Question

我想将鼠标悬停在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;
}

查看jQuery代码

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

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

Answer 1

新框立即显示，因为它最初未标记为隐藏。 .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()对象，或者你应该重用先前存在的元素（如果它存在于元素中，而不是创建越来越多的元素。）

有时当您使用鼠标悬停事件并且您也在更改页面时，对页面的更改可能导致元素丢失鼠标悬停，然后将更改隐藏到页面然后全部重新开始。我无法确定你的情况是否会发生这种情况（我需要一个有效的例子来看看），但似乎有可能。

为什么盒子会立即消失？

1 个答案: