jquery - 如何将鼠标悬停在 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;
}