时间戳

首页 > 解决方案 > 在列表项悬停时显示 div 并保持可见，直到新悬停在另一个列表元素上

html - 在列表项悬停时显示 div 并保持可见，直到新悬停在另一个列表元素上

问题描述

我正在寻找一种解决方案来保持 div 在悬停时可见，并且它应该保持可见，直到我再次悬停而不是 mouseout 事件。

可以悬停的列表的当前标记：

<ul class="crops-archive-home">           
    <li class="vegetables" style="background: #85bc22">        
        <a href="#">Vegetables</a>      
    </li>         
    <li class="bedding-plants" style="background: #00843a">        
        <a href="#">Bedding plants</a>      
    </li>
  etc....
</ul>

以及需要在悬停时显示的 div 

<div class="quote vegetables" style="background: rgba(133,188,34,0.8)">        

    <p>Lorem ipsum advised growbags and growblocks</p>                  
    <hr>
    <p class="sub-quote">Now Victor can grow peat-free and organic</p>

</div>

<div class="quote bedding-plants" style="background: rgba(0,132,58,0.8)">          

    <p>Bedding plants root best on Lorem Ipsum Substrates</p>
    <hr>
    <p class="sub-quote">Healthy plants, stronger roots</p>

</div> 

etc....

这是当前的 CSS

.quote{
    opacity: 0;
    transition: opacity 0s 5s;
}   

.quote.active{
    opacity: 1;
    transition: all .4s;
}

并且使用的jQuery：

jQuery(document).ready(function(){
    jQuery(".vegetables").hover(function(){
        jQuery('.quote.vegetables').toggleClass('active');   
    }); 
    jQuery(".bedding-plants").hover(function(){
        jQuery('.quote.bedding-plants').toggleClass('active');   
    });
etc.... 
};

当前设置在悬停时显示报价 div，它保持可见 5 秒，但在 5 秒内将鼠标悬停在新链接上时可以与另一个报价重叠。

已经用 . show()但随后.hide()报价立即消失。

标签： htmljquerycss

解决方案

如果有一组特定的 div 是此逻辑的一部分，而不是切换类，您最好active在悬停时添加（而不是切换）类，同时active从其他元素中删除类通过循环遍历这些元素的数组，是该逻辑的一部分。

您还可以跟踪变量中的活动类并在每次悬停时更新它，而不是循环遍历其他元素的数组。

关键是使用.addClass而不是toggleClass.

要删除现有的active类：

$('div.quote').each(function(div) {
     div.removeClass('active');
})

推荐阅读