使用定時器、滑鼠移動事件
var img = $('#user_head');
var menu = $('.nav_list');
var i=0;
var timer;
img.mouseenter(function () {
clearTimeout(timer)
menu.show()
})
img.mouseleave(function () {
timer = window.setTimeout(function () {
menu.hide()
},500)
})
menu.mouseenter(function () {
clearTimeout(timer)
// menu.css('visibility','vidible')
})
menu.mouseleave(function () {
menu.hide()
})
使用純css方式
-
html
```html
- 首頁
- 消息管理
- 添加使用者
- 删除使用者
- 查詢使用者
- 使用者管理
- 添加使用者
- 删除使用者
- 修改使用者
- 頭像
-
css
```css
{
padding: 0; margin: 0; list-style: none;
}
/初始化 a /
a{
text-decoration: none; color: deepskyblue;
}
/設定外層導航布局/
.nav-swrap>ul{
display: -webkit-box;
width: 80%;
height: 50px;
margin: 0 auto;
}
/外層li*/
.nav-swrap>ul>li{
-webkit-box-flex: 1;
height: 100%; line-height: 50px;
background-color: #eee;
text-align: center;
}
/内層ul, 絕對定位, 高度為0，保證滑鼠移動到二級導航下，不會出現/
.sub-nav{
padding-top: 10px;
width: 100%;
-webkit-perspective: 400px;
.sub-nav>li{
background: -webkit-linear-gradient(top, #ccc,#eee);
width: 50%;
margin: 0 auto;
}
.sub-nav{
display: none;
}
.nav-swrap>ul>li>a{
display: inline-block;
height: 100%;
width: 100%;
}
.nav-swrap>ul>li>a:hover+ul,.sub-nav:hover{
display: block;
}
轉載于:https://www.cnblogs.com/zhuxiang1633/p/10587329.html