我正在尝试创建悬停菜单,但想让悬停菜单打开一段时间,例如 2 秒。我正在尝试为此添加 CSS 转换,但它不起作用。我正在使用以下样式 CSS:
.drop_menu {
background:#10BDF5;
padding:0;
margin:0;
list-style-type:none;
height:25px;
}
.drop_menu li { float:left; }
.drop_menu li a {
padding:3px 6px;
display:block;
color:#FFF;
text-decoration:none;
font-size: 11px;
line-height: 22px;
}
/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#51C7ED;}
.drop_menu li:hover ul {
left:0px;
top:28px;
background:#51C7ED;
padding:0px;
border-bottom: 5px solid #1292BB;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
/* LOOK AT THESE CSS TRANSITION PROPERTIES */
-webkit-transition: visibility 2s ease-in;
-moz-transition: visibility 2s ease-in;
}
.drop_menu li:hover ul li a {
padding:1px 4px;
display:block;
width:200px;
font-size: 11px;
text-indent:11px;
background-color:#10BDF5;
}
.drop_menu li:hover ul li a:hover { background:#51C7ED; }
请查看此行下方的属性:/* 查看这些 CSS 转换属性 */
我使用的语法或属性是否正确?
最佳答案
这对我有帮助 link他们使用 opacity
而不是 display: none;
.drop_menu li:hover ul {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.drop_menu li ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
希望对您有所帮助。
根据评论编辑 HTML CSS:
HTML 编辑器 1:http://codepen.io/anon/pen/ByLVym
HTML 编辑器 2:http://codepen.io/anon/pen/ogzygb
关于html - 如何将 CSS 过渡应用于悬停菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27669113/