jquery - 在鼠标悬停时显示或隐藏部分

Question

我正在尝试创建一个部分，就像 jquery 选项卡一样。但是我希望它能在鼠标悬停时工作，而不是点击。它现在工作，但它的马车。如果我将鼠标悬停在显示的特定部分上，但如果我移动光标并再次将鼠标悬停在同一区域上，则它不起作用。我该如何解决它。 (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

这应该有效:

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

我添加了 split() 方法，因为如果没有它，第一个 li 将无法工作，因为有两个类(color-option- 1 和 active)。