好的,所以我创建了一个按钮,将鼠标悬停在它上面时会显示一个菜单。一旦鼠标离开按钮,菜单就会被隐藏。这是完美的,但是当我从鼠标移到菜单本身时,菜单不应该消失。这也在发生,但我使用 css 创建了一个反弹效果,使其更时尚一点,如果我尝试在动画发生之前将鼠标悬停在菜单上,菜单会再次隐藏,因为菜单之间的差距和按钮在弹跳动作期间,所以我想延迟隐藏 2 秒,这样即使有人继续按钮并尝试移动菜单,它也应该等待至少 2 秒才能消失。链接到小提琴
HTML 代码
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="listOfNumbers"><a id="Menus" href="">Numbers</a><div>
<ul class="submenu">
<li>
<a id="one" href="">one</a>
</li>
<li>
<a id="two" href="">two</a>
</li>
<li>
<a id="three" href="">three</a>
</li>
<li>
<a id="four" href="">four</a>
</li>
<li>
<a id="five" href="">five</a>
</li>
<li>
<a id="six" href="">six</a>
</li>
<li>
<a id="seven" href="">seven</a>
</li>
<li>
<a id="eight" href="">eight</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
CSS 代码:
ul.menu .listOfNumbers{
position: fixed;
margin-left: 20px;
list-style-type: none;
margin: 15px 0;
float: left;
height: 30px;
line-height: 30px;
}
ul.menu .listOfNumbers a{
position: fixed;
margin-left: 93px;
background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80)) );
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(17,17,17,1) 60%, rgba(0,0,0,1) 77%, rgba(19,19,19,1) 91%);
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
display: block;
padding: 0;
text-decoration: none;
color: #fff;
font-size: 12px;
font-weight: bolder;
text-shadow: #000 0 -1px 1px;
width: 90px;
text-align: center;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #000;
-webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
-moz-transition: text-shadow .7s ease-out, background .7s ease-out;
-moz-box-shadow: white 7px 5px 20px;
-webkit-box-shadow:white 7px 5px 20px;
box-shadow: white 7px 5px 20px;
}
ul.menu .submenu{
display: none;
top: -30px;
position: absolute;
opacity: 0;
}
ul.menu .submenu li{
list-style-type: none;
}
ul.menu li:hover .submenu{
display: block;
top: -2px;
opacity: 1;
animation:mymove 1.2s linear;
-moz-animation:mymove 1.2s linear; /* Firefox */
-webkit-animation:mymove 1.2s linear; /* Safari and Chrome */
-o-animation:mymove 1.2s linear; /* Opera */
-ms-animation:mymove 1.2s linear; /* IE */
}
@keyframes mymove
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-ms-keyframes mymove /* IE */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
ul.menu .submenu li:first-child a{
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:2px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:2px;
-moz-border-top-left-radius: 10px;
-moz-border-radius-bottomleft:2px;
-moz-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 2px;
border-top-left-radius: 10px;
border-bottom-left-radius:2px;
border-top-right-radius: 10px;
border-bottom-right-radius:2px;
margin: 34px 95px;
z-index: 1000;
}
ul.menu .submenu li:last-child a{
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:10px;
-moz-border-top-left-radius: 2px;
-moz-border-radius-bottomleft:10px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:10px;
-moz-border-top-right-radius: 2px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 2px;
border-bottom-left-radius:10px;
border-top-right-radius: 2px;
border-bottom-right-radius:10px;
margin:260px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(2) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 68px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(3) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 100px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(4) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 133px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(5) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 165px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(6) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 197px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(7) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 229px 95px;
z-index: 1000;
}
我不知道是否有必要涉及 javascript 或 jQuery。但是,如果使用它们中的任何一个都可以实现,那么它也很好。