Question

我有2个悬停功能问题：

当我悬停.cate-name时，我显示dd.sub-cate - 但当我离开.cate-name时，它会隐藏dd.sub-cate元素。当我将鼠标悬停在显示的元素上时，如何让它保持可见？

第二个问题是，当active可见时，我想向.cate-name元素添加dd.sub-cate类。我想我需要使用：以某种方式可见？

我还需要该函数只能处理父容器 - .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

在悬停时显示第二个div并使用悬停元素上的活动类使其保持可见

1 个答案: