使用悬停功能淡入/淡出

时间:2013-08-23 09:01:20

标签: javascript jquery html css

您好我想在我的悬停上实现淡入/淡出效果,我怎么能这样做因为我需要保持光标位置以显示文本。

http://jsfiddle.net/u3pW8/34/

    $(function() {
    $("#static .wrapper").hover(function (e) {
        var parentOffset = $(this).parent().offset(); 
        var relX = e.pageX - parentOffset.left;
        $(this).children(".hidden-content").css("left", relX);
    });
});

寻求帮助!

2 个答案:

答案 0 :(得分:1)

使用CSS3过渡:

.hidden-content {
    position: absolute;
    opacity:0;
    display:block;
    transition: opacity 0.2s ease;
}

.wrapper:hover .hidden-content {
    opacity:1;
}

http://jsfiddle.net/u3pW8/35/

答案 1 :(得分:0)

我对您的代码进行了一些更改。这应该工作。 我在其他方面添加了这一行:

$(this).children(".hidden-content").fadeIn('slow');

http://jsfiddle.net/u3pW8/37/