如何将鼠标悬停在div框上并使其第一个孩子出现？

Question

这是我的问题所遵循的代码......

jQuery的

$(document).ready(function(){
    $('.dude').hover(function(){
        $('div').find(">:first-child").css( "display", "inline" );
    }, function() {
    $('div').find(">:first-child").css( "display", "hidden" );
    );
});

CSS

.dude{
    min-height:50px;
}

HTML

<div class="dude">ONE<div>TWO</div>three</div>

当我将鼠标悬停在带有"dude"类的div框上时,我试图让TWO出现,只要用户正在徘徊,那么它就会回到隐藏状态.

Answer 1

你可以用CSS做到这一点:

.dude > :first-child {
    display: none;
}

.dude:hover > :first-child {
    display: inline;
}