我想在css中应用延迟鼠标输出

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

我想要在用户将鼠标指针移出菜单之后，菜单保持稳定一段时间（例如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; 
}

来源

2013-04-24 Tim John

您可以将延迟添加到转换，语法如下：

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

所以

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

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

我已经创建了一个这样的演示，因为您需要做一些有点棘手的事情，才能让该项目毫不拖延地出现，但延迟之前就会出现延迟。

http://jsfiddle.net/pgqM2/

关键是要重新定义过渡到加3秒延迟时，有没有悬停，但有一个0延迟时，有一个悬停：

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

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

来源

2013-04-24 22:26:40 Fenton

感谢但它不工作，你能告诉我我应该在哪里嵌入webkit延迟，请检查我的CSS鳕鱼。你想要活的链接，然后我会发布在这里。 – 2013-04-24 22:45:36

我已经添加了一个简单的JSFiddle演示的链接。所有前缀的语法都是相同的，无论是“-o”还是“-webkit”等。 – Fenton 2013-04-24 22:52:55

感谢史蒂夫芬顿，它的工作，但没有追加整体，下拉快速隐藏。和在鼠标上的下拉菜单上切到peice。不显示整体。如果你能帮助我，我会发给你网站的网址。 – 2013-04-24 23:22:15

CSS中有transition-delay属性。只需将其添加到您的代码中，即可获得所需的效果。

transition-delay:3s;

速记过渡性的目的，这里是一个图片，总结起来

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

因此，在你的情况应该是这样的

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>

这里是一个fiddle证明

来源

2013-04-24 22:24:45

谢谢，但它不工作，你能告诉我我应该在哪里嵌入webkit延迟，请检查我的CSS鳕鱼。你想要活的链接，然后我会发布在这里。 – 2013-04-24 22:44:59

@TimJohn什么不工作？ – 2013-04-25 02:13:58

请确保也使用前缀版本（这也增加了IE支持）。（并且请注意，Chrome 26，Firefox 16和Opera 12.1都没有前缀'transition'，所以至少'-moz-'可能不需要更长的时间。） – Ryan 2013-04-25 03:16:53

你可以使用css3属性transition-delay来延迟执行css。点击“尝试自己”看一个例子。

来源

2013-04-24 22:26:40 AndrewHipp

谢谢，但它不工作，你能告诉我应该在哪里嵌入webkit延迟，请检查我的CSS鳕鱼。你想要活的链接，然后我会发布在这里。 – 2013-04-24 22:45:56

当你使用display none时你不能使用css转换，只有显示none的解决方案是js。

来源

2014-10-23 14:31:23

我想在css中应用延迟鼠标输出

回答

相关问题