我正在寻找一个解决方案，以保持一个div可见的悬停，它应该保持可见，直到我再次悬停，而不是在一个鼠标退出事件。

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

<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()尝试过了，但是引号立即消失了。