t.i.rony t.i.rony - 14 days ago 7
CSS Question

show or hide section on mouse hover

I am trying to create a section, its just like jquery tabs. But instade of clicking i want it to work on mouse hover. Its working now but its buggy. If I hover over the specific section is showing but if I move the cursor and hover again on the same area it is not working. How can I fix it. (html cannot be changed).

<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

This should work:

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

I have added the split() method because without it wouldn't work for the first li, as there are two classes (color-option-1 and active).