顯示第二個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上懸停，並保持它與可見懸停元素上的活動類

回答

相關問題