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

Answer 2

尝试，

$(document).ready(function(){
   $('.dude').hover(function(){
     $(this).children('div').first().css( "display", "inline" );
       }, function() {
     $(this).children('div').first().hide();
  });
});

Answer 3

试;

$(document).ready(function(){
    $('.dude').hover(function(){
        $(this).children().eq(0).css( "display", "inline" );
    }, function() {
        $(this).children().eq(0).hide();
          });
});

注意：你错过了一个'}'来关闭悬停功能：）

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

3 个答案: