zeigen oder verstecken Abschnitt auf Maus Hover

Question

Ich versuche, einen Abschnitt zu erstellen, ist es genau wie Jquery Tabs. Aber instade des Klickens möchte ich, dass es mit dem Maus-Hover arbeitet. Es funktioniert jetzt, aber es ist fehlerhaft. Wenn ich den Mauszeiger über den bestimmten Bereich bewege, aber wenn ich den Cursor bewege und den Mauszeiger über den gleichen Bereich bewege, funktioniert es nicht. Wie kann ich es reparieren. (HTML kann nicht geändert werden).

<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

Diese Arbeit sollte :

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

ich habe die split() hinzugefügt Methode, denn ohne es würde nicht für die erste li, wie es zwei Klassen (color-option-1 und active) sind.

Answer 2

Einfach, weil das erste Mal, wenn Sie eine active Klasse Ihren div hinzufügen.

Das nächste Mal, wenn Sie den Mauszeiger darüber halten, hat die Klasse des Div aktiv und die id, die Sie den falschen Selektor gibt.

Sie haben zwei Optionen:

1- hinzufügen active Klasse li statt div

2- Wenn Sie die Klasse von div sind, entfernen Sie die active falls vorhanden