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

很简单，因为您第一次向active添加div课程。

下次，如果将鼠标悬停在该区域上，则div的类具有有效加上id，这会为您提供错误的选择器。

您有两个选择：

1-将active课程添加到li而不是div

2-当您获得div类时，请删除active（如果有）

Answer 2

这应该有效：

$(".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）。

显示或隐藏鼠标悬停部分

2 个答案: