I am currently working on a section that functions like jQuery tabs, but instead of requiring a click to activate, I want it to work on mouse hover. The current implementation is somewhat buggy - when hovering over a specific section, it displays as expected, but if the cursor moves and then hovers over the same area again, it stops working. How can this issue be resolved without making changes to the HTML structure?
<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 () {
});