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

我有2个悬停功能问题：

当我悬停.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>

最佳答案

好像你只想要这样的东西

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

https://jsfiddle.net/yLxu6qt7/3