Question

我的页面上有一个li元素<li class="basket last items">。如果用户将鼠标悬停在该li上，则会显示另一个div <div class="articles">。我想在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;
}

我认为使用该规则时，mouseout应该延迟5秒，但它不起作用。

编辑：这是我的问题的一个问题http://jsfiddle.net/21tn6bq6/我遗漏了不必要的CSS，但基本上这是我的问题。我希望div在mouseout之后停留几秒钟。

Answer 1

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

Answer 2

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

FIDDLE：https://jsfiddle.net/21tn6bq6/4/

如何延迟mouseout上元素的消失

2 个答案: