html – CSS – 缓慢悬停效果

html – CSS – 缓慢悬停效果,第1张

概述我正在创建一个CSS动态菜单,并希望延迟悬停 *** 作.当菜单悬停在链接上时,菜单的反应是提供子菜单(下拉菜单). 我想减慢下拉过程,以便子菜单不会立即出现,但需要1秒才能下拉.非常感谢帮助. 代码如下: <html><head><style>#navMenu{ margin:0; padding:0;}#navMenu ul{ margin:0; paddi 我正在创建一个CSS动态菜单,并希望延迟悬停 *** 作.当菜单悬停在链接上时,菜单的反应是提供子菜单(下拉菜单).

我想减慢下拉过程,以便子菜单不会立即出现,但需要1秒才能下拉.非常感谢帮助.

代码如下:

<HTML><head><style>#navMenu{    margin:0;    padding:0;}#navMenu ul{    margin:0;    padding:0;}#navMenu li{    margin-right:2px;    padding:0;    List-style:none;    float:left;    position:relative;    background:#CCC;}#navMenu ul li a{    text-align:center;    Font-family:sans-serif,cursive;    text-decoration:none;    height:30px;    wIDth:150px;    display:block;    color:#000;    border:10px;  -webkit-Transition: background-color 0.1s;  -moz-Transition: background-color 0.1s;  -o-Transition: background-color 0.1s;  Transition: background-color 0.1s;}#navMenu ul ul{        position:absolute;        visibility:hIDden;  -webkit-Transition: background-color 0.1s;  -moz-Transition: background-color 0.1s;  -o-Transition: background-color 0.1s;  Transition: background-color 0.1s;}#navMenu ul li:hover ul{    visibility:visible;   -webkit-Transition: background-color 0.1s;  -moz-Transition: background-color 0.1s;  -o-Transition: background-color 0.1s;  Transition: background-color 0.1s;}</style></head><body><div ID="wrapper"><!--beginning of wrapper div--><div ID="navMenu"><!--Beginning of Nav Menu-->    <ul><!--Beginning of main ul-->      <li><a href="#">About Us</a>            <ul><!--Begining of Internal ul-->                <li><a href="#">link item </a></li>                <li><a href="#">link item </a></li>                <li><a href="#">link item </a></li>                <li><a href="#">link item </a></li>            </ul>     </li>     <li><a href="#">Contact Us</a></li>  </ul><!--End of Main ul --></div></div><p>&nbsp;</p></body></HTML>

提前致谢 :)

问候,

约瑟夫

解决方法 您可以使用CSS Transition-delay属性,如下所示:
Transition-delay: 1s; /* delays for 1 second */-webkit-Transition-delay: 1s; /* for Safari & Chrome */

在此处查找更多信息http://www.w3schools.com/cssref/css3_pr_transition-delay.asp

总结

以上是内存溢出为你收集整理的html – CSS – 缓慢悬停效果全部内容,希望文章能够帮你解决html – CSS – 缓慢悬停效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1136435.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存