マウスのホバーのセクションを表示または非表示にします

Question

セクションを作成しようとしています。これはjqueryタブと同様です。しかし、私はそれがマウスのホバー上で動作したいクリックのinstade。今は動作していますが、そのバギーです。特定のセクションにカーソルを合わせると表示されますが、カーソルを移動して同じエリアで再びカーソルを移動すると機能しません。どうすれば修正できますか？ （htmlは変更できません）。

<div class="section-option"> 
    <ul> 
    <li> 
     <div class="color-option-1 active"> </div> 
     <p>JBL Clip2</p> 
    </li> 
    <li> 
     <div class="color-option-2"> </div> 
     <p>Bluetooth</p> 
    </li> 
    <li> 
     <div class="color-option-3"> </div> 
     <p style="word-wrap: unset !important;">Wasserdicht</p> 
    </li> 
    <li> 
     <div class="color-option-4"> </div> 
     <p>Akku</p> 
    </li> 
    <li> 
     <div class="color-option-5"> </div> 
     <p>Audiokable</p> 
    </li> 
    </ul> 
</div> 
<div id="color-option-1" class="color-option"> 
    <p>content 1 </p> 
</div> 
<div id="color-option-2" class="color-option hide"> 
    <p>content 2 </p> 
</div> 
<div id="color-option-3" class="color-option hide"> 
    <p>content 3 </p> 
</div> 
<div id="color-option-4" class="color-option hide"> 
    <p>content 4 </p> 
</div> 
<div id="color-option-5" class="color-option hide"> 
    <p>content 5 </p> 
</div> 


$(".section-option li") 
     .mouseenter(function() { 
      $id = $(this).children("div").attr("class"); 
      $(".color-option").addClass("hide"); 
      $(".section-option li div").removeClass("active"); 
      $("#" + $id).removeClass("hide"); 
      $(this).children("div").addClass("active"); 

     }) 
     .mouseleave(function() { 


     }); 

Answer 1

これは動作するはずactive場合、削除の代わりにdiv

の2- liにactiveクラスを追加します。 ：

$(".section-option li").hover(function() { 
    var id = $(this).children("div").attr("class").split(' ')[0]; 
    $("#" + id + "").toggleClass("active").toggleClass("hide"); 
}); 

私はsplit()を追加しました（color-option-1とactive）という2つのクラスがあるため、最初のliでは機能しないため、このメソッドは使用できません。

Answer 2

シンプル、初めてあなたのdivにactiveクラスを追加しているので。

次回、その上にマウスを置くと、divのクラスには有効な番号がプラスされ、idに間違ったセレクタが追加されます。

あなたが持っている2オプション：

1-あなたはdiv要素のクラスを取得している場合はいずれかが