悬停在父元素上时无法让子元素淡入

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");       }
                        );