Question

我是JQuery的新手，我正在尝试让用户元素在用户将鼠标悬停在父元素上时淡入显示产品信息。

就运气而言，这就是我的好消息：

jQuery的：

$('.overlay-wrap').hover(function(){

    $('.product-overlay', this).fadeIn(2000, "swing");

    },

    $('.product-overlay', this).fadeOut("fast");

});

HTML：

<div class="overlay-wrap">
            <div class="product-overlay"><a href="#">Name of the product</a></div>
    </div>

CSS：

.overlay-wrap{
    position:relative;
    border:1px solid red;
    width:200px;
    height:200px;
}
    .product-overlay{
        position:absolute;
        bottom:0px;
        left:0px;
        background:#000;
        opacity:0.5;
        padding:5px;
        width:100%;
        display:none;
    }
    .product-overlay a{
        font-size:12px;
        line-height:20px;
    }

这是迄今为止我所拥有的简化JSFiddle。

当我将鼠标悬停在父元素上时，为什么子元素不会消失？

Answer 1

您没有为悬停停止事件创建正确的函数处理程序。

jsFiddle Demo

$('.overlay-wrap').hover(
    function () { $('.product-overlay', this).fadeIn(2000, "swing"); },
    function () { $('.product-overlay', this).fadeOut("fast");       }
                        );

将鼠标元素悬停在父元素上时无法获取子元素

1 个答案: