Question

HTML：

我有一个ul列表，每个li都像这样：

   <li class="A">list-item
     <div>1</div>
     <div class="B">2
        <div class="C">3</div>
     </div>

   </li>

其中div C有css属性display：none; 我写了这个js：

   $(".A").hover(function () {
   $(".C").toggle();
   });

显示li悬停时隐藏的div，但我希望js仅在活动的li项目上工作。因此，当我悬停li项时，它只显示隐藏div的列表项。

有什么建议吗？我是js的新手，所以任何帮助都会受到赞赏，thnx！

Answer 1

尝试类似这样的内容，它会在C中找到类this（这将是悬停的元素）

$(".A").hover(function() {
    $(this).find(".C").toggle();
});

Answer 2

使用context将查找范围缩小到所需元素的子项。

$(".A").hover(function () {
   $(".C", this).toggle();
});

Answer 3

使用hover()，hover函数的正确格式为：

$(".A").hover(
  function () {
    // A function to execute when the mouse pointer enters the element.
    $(this).find(".C").show();
  },
  function () {
    // A function to execute when the mouse pointer leaves the element.
    $(this).find(".C").hide();
  }
);

在列表项上显示隐藏的div

3 个答案: