javascript - 在悬停时显示第二个 div 并通过悬停元素上的事件类保持其可见

Question

我在悬停功能方面遇到两个问题:

当我悬停时.cate-name我正在显示dd.sub-cate - 但当我离开时.cate-name它隐藏了 dd.sub-cate元素。当我悬停显示的元素时如何保持它可见？

第二个问题是我想添加一个active类到 .cate-name元素当 dd.sub-cate是可见的。我想我需要以某种方式使用 :visible ？

我还需要该函数仅适用于父容器 - .categories-list-box

脚本:

   $(".cl-item .cate-name").on({ 
     mouseenter: function () {
   $(this).closest('dl.cl-item').find("dd.sub-cate").show();
   },
     mouseleave: function () {
   $(this).closest('dl.cl-item').find("dd.sub-cate").hide();
   }
   });

HTML

<div class="categories-list-box">    
 <dl class="cl-item>
  <dt class="cate-name"><span><a href="#>Clothing</a></span></dt>
  <dd class="sub-cate" style="display: none;"></dd>
 </dl>
</div>

<div class="categories-list-box">    
 <dl class="cl-item>
  <dt class="cate-name"><span><a href="#>Shoes</a></span></dt>
  <dd class="sub-cate" style="display: none;"></dd>
 </dl>
</div>

Answer 1

看起来你只是想要这样的东西

$('.cl-item').hover(function() {
  $(this).find('dd.sub-cate').toggleClass('active');
});

https://jsfiddle.net/yLxu6qt7/3