如何在鼠标移出时延迟元素的消失答案

【问题标题】：How to delay the disappearance of an element on mouseout如何在鼠标移出时延迟元素的消失
【发布时间】：2015-08-23 02:57:12
【问题描述】：

我的页面上有一个 li 元素，它是 <li class="basket last items">。如果用户将鼠标悬停在该 li 上，则会显示另一个 div，即<div class="articles">。我想延迟鼠标移出时 div 的消失。

我目前的css规则：

#headlinks li.basket div.articles {
    padding:5px;
    width:380px;
    z-index:100;
    position:absolute;
    border:1px solid #405ade;
    -webkit-transition: display .5s all;   
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all;   
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all;   
    -ms-transition-delay: 5s; 
    -o-transition: .5s all;   
    -o-transition-delay: 5s; 
    transition: .5s all;   
    transition-delay: 5s; 
}
#headlinks li.basket:hover div.articles {
    z-index:1000;
    display:block;
    background-color:#fff;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -transition-delay: 0s;
}

我认为按照该规则，鼠标移出应该延迟 5 秒，但它不起作用。

编辑： 这是我的问题的一个 jsfiddle http://jsfiddle.net/21tn6bq6/ 我省略了不必要的 css 但基本上这是我的问题。我希望 div 在鼠标移出后多停留几秒钟。

【问题讨论】：

Delay mouseout/hover with CSS3 transitions的可能重复
我读过那篇文章，但正如你所见，我尝试使用它，但它不起作用。这就是我需要帮助的原因。
您可能需要创建一个演示（这里是 sn-p 或 jsfiddle.net）。 “它不起作用”没有多大帮助。
你不能转换像block和none这样的非数字值。例如，过渡的中点会是什么样子。没有 display: half-block-half-none 属性
好的，我知道了，谢谢。

标签： html css

【解决方案1】：

我认为你已经改变了延迟。您当前的 CSS 在鼠标悬停时显示延迟，而不是鼠标悬停

【讨论】：

我的 :hover 动作延迟为 0，因为我想延迟鼠标悬停而不是悬停，我认为它应该这样工作。

【解决方案2】：

display 属性不是“可动画的”，transitions 不能使用它。您需要将其更改为 opacity 或其他内容。而且您还需要交换 transitions 属性以获得您想要的效果。

小提琴：https://jsfiddle.net/21tn6bq6/4/

【讨论】：