javascript - JQuery 从左侧悬停时淡入/淡出

Question

我试图在悬停时获得淡入和淡出效果，但似乎不起作用!

<div class="icon_menu">
    <div class="text_menu_slide">Logout</div> x
</div>

jquery:

$(function(){
    $(".icon_menu").hover(function(){
        $(this).find(".text_menu_slide").fadeIn();
    },function(){
        $(this).find(".text_menu_slide").fadeOut();
    });        
});

CSS:

.text_menu_slide{
    display:none;
}
.icon_menu:hover .text_menu_slide, .icon_menu{
    display:inline;     
}

演示: <强> http://jsfiddle.net/XwnGA/

Answer 1

display:inline css 代码不是必需的。在显示无库的框架和扩展中，选择任意 jQuery 版本。此外，您可以使用 span 标签代替 div。

HTML 代码

<div class="icon_menu">
    <span class="text_menu_slide">Logout</span> x
</div>

CSS 代码

.text_menu_slide{
    display:none;
}

jQuery 代码

$(function(){
    $(".icon_menu").hover(function(){
        $(this).find(".text_menu_slide").fadeIn();
    },function(){
        $(this).find(".text_menu_slide").fadeOut();
    });        
});

JSFIDDLE DEMO