Html 如何延迟mouseout上元素的消失

我的页面上有一个li元素，它是

。 如果用户将鼠标悬停在该li上，则会显示另一个div，即

。我想推迟mouseout上的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秒，但它不起作用

---

编辑：这里是我的一个问题，我忽略了不必要的css，但基本上这是我的问题。我想在鼠标移出后，div再停留几秒钟。

我想你的延迟被切换了。您当前的CSS在鼠标悬停时显示延迟，而不是鼠标悬停

我想您已经切换了延迟。您当前的CSS在鼠标悬停时显示延迟，而不是鼠标悬停。

display

属性不可“动画化”，而

转换

不能使用它。您需要将其更改为

不透明度

或其他内容。此外，您还需要交换

转换

属性以获得所需的效果

---

FIDDLE:

显示的

属性不是“可动画的”，转换的
不能使用它。您需要将其更改为
不透明度
或其他内容。此外，您还需要交换
转换
属性以获得所需的效果

FIDDLE:
可能是我读过的那篇文章的副本，但正如你所看到的，我试图使用它，但它不起作用。这就是我需要帮助的原因。您可能需要创建一个演示（在这里的代码片段中或在）。“它不工作”没有多大帮助。您不能转换非数值，例如
块
和
无
。例如，过渡的W中点是什么样的。没有显示：半块半无
propertyOk现在我知道了，谢谢。可能是重复的我读了那篇文章，但正如你所看到的，我试图使用它，但它不起作用。这就是我需要帮助的原因。您可能需要创建一个演示（在这里的代码片段中或在）。“它不工作”没有多大帮助。您不能转换非数值，例如
块
和
无
。例如，过渡的W中点是什么样的。没有显示：半块半无

propertyOk现在我知道了，谢谢。可能是重复的我读了那篇文章，但正如你所看到的，我试图使用它，但它不起作用。这就是我需要帮助的原因。您可能需要创建一个演示（在这里的代码片段中或在）。“它不工作”没有多大帮助。您不能转换非数值，例如

块

和

无

。例如，过渡的W中点是什么样的。没有显示：半块半无propertyOk现在我知道了，谢谢。我在：hover操作上得到了0延迟，因为我想延迟鼠标出而不是悬停，我认为应该这样做。我在：hover操作上得到了0延迟，因为我想延迟鼠标出而不是悬停，我想应该是这样的。我在：hover操作上得到了0延迟，因为我想延迟鼠标移出而不是悬停，我想应该是这样的。