Html 我想在 css 中对鼠标退出应用延迟

I Want To Apply Delay On Mouse Out in css

提问by Tim John

I am trying to apply a delay before starting a CSS transition on mouse out event. My CSS code is below, please let me know how to apply time delay before CSS transition on mouse out starts.

我试图在鼠标退出事件上开始 CSS 转换之前应用延迟。我的 CSS 代码如下，请让我知道如何在鼠标移开的 CSS 过渡开始之前应用时间延迟。

I want to achieve that the menu stays stable for some time (e.g. for 3 seconds) after the user moves mouse pointer out of the menu.

我想实现在用户将鼠标指针移出菜单后菜单保持稳定一段时间（例如 3 秒）。

.timnav li .dropdown {
    width: auto;
    min-width: 0px;
    max-width: 230px;
    height: 0;
    position: absolute;
    overflow: hidden;
    z-index: 999;
    background:rgba(255, 255, 255, 0.8);
    }

.timnav li:hover .dropdown {
    min-height: 60px;
    max-height: 500px;
    height: auto;
    width: 100%;
    padding: 0;
            -webkit-transition: delay .5s ease-in-out;
        -moz-transition: delay .5s ease-in-out;
        -o-transition: delay .5s ease-in-out;
}

.timnav li .dropdown ul {
    margin: 0;
    margin-top:7px;


}

.timnav li .dropdown ul > li {
    display: block;
    width: 100%;
    float: left;
    text-align: left;
    height: auto;
    border-radius: none;
    padding-bottom:2px;
}


    .timnav li .dropdown  .dropdown2{
    display: none;
    width: 100%;
    float: left;
    text-align: left;
    height: auto;
    border-radius: none; 
}

    .timnav li .dropdown ul > li:hover .dropdown2{
    display: block;
    width: 100%;
    float: left;
    text-align: left;
    height: auto;
    border-radius: none;

}

    .timnav li .dropdown .dropdown2:hover {
    display: block;
    width: 100%;
    float: left;
    text-align: left;
    height: auto;
    border-radius: none;


}


    .timnav li .dropdown .dropdown2 li a {
    display: block;
    padding-left:7px !important;
    height:6 !important;
    padding-top:8px;
    background: url(../images/nav-bg.jpg) repeat; color:#fff;

}


.timnav li .dropdown ul > li a {
    display: block;
    line-height: 26px;
    height: 22px;
    padding: 10px;
    background: url(../images/nav-crrent.jpg) repeat; color:#FFFFFF;

}

.timnav ul .dropdown ul li:first-child a {
    border-radius: 0;
}

.timnav li .dropdown li a:hover {
    background: url(../images/nav-bg.jpg) repeat; color:#000;
}

回答by Fenton

You can add a delay to a transition, the syntax is as follows:

您可以为过渡添加延迟，语法如下：

transition: all 0.5s ease-in-out 3s;

So

所以

transition: <property> <duration> <timing-function> <delay>;

The syntax is the same for all the prefixed versions also.

所有带前缀的版本的语法也相同。

I have created a demo of this, because you need to do something a bit tricky in order to make the item appear with no delay, but delay before it goes.

我已经为此创建了一个演示，因为您需要做一些有点棘手的事情才能使项目无延迟地出现，但要在它消失之前延迟。

http://jsfiddle.net/pgqM2/

http://jsfiddle.net/pgqM2/

The trick is to re-define the transition to add the 3s delay when there is no hover, but to have a 0s delay when there is a hover:

诀窍是重新定义过渡以在没有悬停时添加 3 秒延迟，但在悬停时添加 0 秒延迟：

li ul {
    opacity: 0;
    transition: all 0.5s ease 3s;
}

li:hover ul {
    opacity: 1;
    transition: all 0.5s ease 0s;
}

回答by Cody Guldner

There is a transition-delayproperty in CSS. Simply add this to your code, and you will get the desired effect.

transition-delayCSS 中有一个属性。只需将此添加到您的代码中，您将获得所需的效果。

transition-delay:3s;

For the purpose of shorthand transition properties, here is a picture that sums it up

为了速记过渡属性的目的，这里是一张总结它的图片

So in your case it would look like this

所以在你的情况下它看起来像这样

div:hover {
  -webkit-transition: .5s ease-in-out 3s;
  -moz-transition: .5s ease-in-out 3s;
  -o-transition: .5s ease-in-out 3s;
  transition: .5s ease-in-out 3s;
  color: red;
  cursor: pointer;
}

<div>Hover me. There is a delay!</div>

Here is a fiddleto demonstrate

这是一个演示的小提琴

回答by Goran Jakovljevic

You cant use css transition when using display none, only solution with display none is js.

使用 display none 时不能使用 css transition，只有 display none 的解决方案是 js。

回答by AndrewHipp

You can use the css3 property transition-delayto delay executing css. Click "Try it Yourself" to see an example.

您可以使用 css3 属性transition-delay来延迟执行 css。单击“自己尝试”以查看示例。