显示第二个div上悬停，并保持它与可见悬停元素上的活动类

我有2个问题，悬停功能：显示第二个div上悬停，并保持它与可见悬停元素上的活动类

当我徘徊.cate-name I'm显示dd.sub-cate - 但是当我离开.cate-name它隐藏了dd.sub-cate元素。当我悬停显示的元素时，如何保持它可见？

第二个问题是，当dd.sub-cate可见时，我想向.cate-name元素添加active类。我想我需要使用：不知何故可见？

我还需要在父容器上的功能，唯一的工作 - .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>

来源

2017-01-16 user3344734

好像你只是想这样的事情

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

https://jsfiddle.net/yLxu6qt7/3

来源

2017-01-16 11:36:02 justtry

是的，那效果更好。我只需要一个.active类到.cl-item以及只要dd.sub-cate在我的答案中可见 – user3344734

更新的代码，因为悬停在'.cl-item'上，那么'dd.sub- cate'直到所有cl-item'悬停为止都可见 – justtry

将其改为$（'.cl-item'）。hover（function（）{（this）.toggleClass（“active”）。find 'dd.sub-cate'）。toggleClass（“active”）; }）;'它的工作原理是我想要的，谢谢“ – user3344734

显示第二个div上悬停，并保持它与可见悬停元素上的活动类

回答

相关问题