ホバー上で子供をトグルする、そうでなければ最初の子供をアクティブにする

Question

私はjQueryで基本的なことをしようとしています。 最初の段落（.active）がデフォルトで表示されるはずです。ユーザーが2番目、3番目などをホバリングしている場合lip.boxが表示され、他は隠されている必要があります。

<ul class="list"> 

    <li> 
    <a href="#"> asdf </a> 
    <p class="box active"> 
     lorem ipsum 
    </p> 
    </li> 

    <li> 
    <a href="#"> asdf 2 </a> 
    <p class="box"> 
     lorem ipsum 2 
    </p> 
    </li> 

</ul> 

http://codepen.io/anon/pen/LNjypP

Answer 1

'hoverは' 'mouseenter' と 'mouseleave' の両方をカプセル化するイベントです。セクションを切り替えるだけなので、 'mouseover'または 'mouseenter'の委任を使用する必要があります。さらに、2つのCSSクラスがあるので、それを利用してください。

$(".list li").on('mouseover',function(){   
     $(".list li p.box").removeClass('active').addClass('no'); 
     $(this).children('p.box').addClass('active'); 
}); 

の作業例：https://jsfiddle.net/com4k82g/1/

Answer 2

あなたはnoとactiveクラス、つまりjQueryと現在のCSSを使用したい場合は、試してみてください。

$(".list li").on('mouseenter', function() { 
    $(".list li").children('p.box').removeClass('active').addClass('no'); 
    $(this).children('p.box').addClass('active').removeClass('no'); 
}); 

はmouseenter代わりのhoverの使用に注意してください。

デフォルトのp.boxディスプレイをdisplay:noneに設定して、1つのクラス、つまりactiveクラスを追加/削除するだけで済みます。

CSS：

p.box {display:none;} 
p.box.active {display:block;} 

とjQuery：

あなたの例を改正

$(".list li").on('mouseenter', function() { 
    $(".list li").children('p.box').removeClass('active'); 
    $(this).children('p.box').addClass('active'); 
}); 

：http://codepen.io/anon/pen/jqLmwK

Answer 3

$('.list>li').hover(
 
    function(){ 
 
    $('p').removeClass('active'); 
 
    $(this).find('p').addClass('active') 
 
    }, 
 
    function(){ 
 
    $(this).find('p').removeClass('active'); 
 
    /* next line makes first p be active when no other one is. remove if unwanted */ 
 
    $('.list>li:first-child p').addClass('active'); 
 
    } 
 
);

p {display: none;} 
 
p.active {display: inline;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list"> 
 

 
    <li> 
 
    <a href="#"> asdf </a> 
 
    <p class="box active"> 
 
     lorem ipsum 
 
    </p> 
 
    </li> 
 

 
    <li> 
 
    <a href="#"> asdf 2 </a> 
 
    <p class="box"> 
 
     lorem ipsum 2 
 
    </p> 
 
    </li> 
 

 
</ul>

Answer 4

私の提案は、 "箱なし" するために、両方の段落のクラスを設定して、jQueryのホバー機能を使用することです。

$(function() { 
 
    $(".list li").hover(function() { 
 
    $(this).children('p.box').toggleClass('active'); 
 
    }); 
 
});

.no { 
 
    display: none; 
 
} 
 
.active { 
 
    display: block; 
 
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<ul class="list"> 
 
    <li> 
 
     <a href="#"> asdf </a> 
 
     <p class="box no"> 
 
      lorem ipsum 
 
     </p> 
 
    </li> 
 
    <li> 
 
     <a href="#"> asdf 2 </a> 
 
     <p class="box no"> 
 
      lorem ipsum 2 
 
     </p> 
 
    </li> 
 
</ul>