css下拉菜单悬停时延迟1秒
Posted
技术标签:
【中文标题】css下拉菜单悬停时延迟1秒【英文标题】:css drop down menu 1 sec delay on hover 【发布时间】:2016-03-15 03:05:16 【问题描述】:我有一个非常大的超级菜单下拉菜单,当尝试访问内容时,它打开时会有点烦人,而且超级菜单打开时会覆盖屏幕的大部分。有没有办法1秒。当您将鼠标悬停在菜单上时,它会在 CSS 菜单下拉之前延迟?
这里是网站http://www.brokenarrowwear.com/
button, .button
padding: 0.7rem 1.345rem 1.0625rem; /*move menu text height*/
font-size: 1.5rem;
.button-group > li > button, .button-group > li .button
height: 44px; /*move menu background height */
margin-top: -10px;
.button-group > li
height: 30px;
border-left: 1px solid #899299;
.button-group
width: 104%;
letter-spacing: .014em;
.button-group .button
font-family: 'Pathway Gothic One', sans-serif;
color: black;
background-color: ;
text-transform: uppercase;
.buttonleft
border-left: 0 !important;
.button-group .button:hover
background: white;
box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08);
/*Strip the ul of padding and list styling*/
.menu ul
list-style-type:none;
padding:0;
position: absolute;
/*Style for menu links*/
.menu li a
/*display:block;*/
text-align: center;
text-decoration: none;
color: transparent;
/*Hover state for top level links*/
.menu li:hover .button
background: white;
color: #828282; /* hover on menu links */
.menu li:hover
box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08);
/*Style for dropdown links*/
.menu li:hover ul .button
background: white;
color: #161616;
height: 40px;
line-height: 40px;
/*Hover state for dropdown links*/
.menu li:hover ul a:hover
color: #161616;
/*Hide dropdown links until they are needed*/
.menu li ul
display: none;
z-index: 100;
width: 101.5%; /* width of drop down box */
/*Make dropdown links vertical*/
.menu li ul li
display: block;
float: none;
box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08);
-moz-box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08);
-webkit-box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.08);
.hidden li
width: 96%;
height: 461px;
background-color: white;
.hidden li img
margin-top: -55px;
.hidden
left:0px;
margin-top: -20px;
margin-left: -2px;
/*Display the dropdown on hover*/
.menu ul li a:hover + .hidden, .hidden:hover
display: block;
【问题讨论】:
Delay :Hover in CSS3?的可能重复 【参考方案1】:您可以使用过渡选项来延迟悬停。试试这个:
div:hover
transition-delay:1s;
【讨论】:
【参考方案2】:您可以在下面的块中更改foundation.css
-
.button, button
...
或者您可以在 style.css
中覆盖它
【讨论】:
以上是关于css下拉菜单悬停时延迟1秒的主要内容,如果未能解决你的问题,请参考以下文章