您的位置：首页 > Web前端 > JQuery

JQuery- 鼠标样式（二级菜单简易通俗版）

2016-04-02 00:00 696 查看

摘要: 鼠标滑过，显示二级菜单内容，划出隐藏其内容；此方法是最最基础的，一看就会

效果图：

鼠标滑过，显示二级菜单；划出，隐藏二级菜单

html:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>导航</title>
<link href="aa.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
<div>
<a class="title nav1">导航一</a>
<a class="title nav2">导航二</a>
<a class="title nav3">导航三</a>
<a class="title nav4">导航四</a>
<a class="title nav5">导航五</a>
<a class="title nav6">导航六</a>
</div>
<div>
<!-- 导航一内容 -->
<div class="c-style one">
<a href="">内容1</a>
<a href="">内容2</a>
<a href="">内容3</a>
</div>
<!-- 导航二内容 -->
<div class="c-style two">
<a href="">内容1</a>
<a href="">内容2</a>
<a href="">内容3</a>
</div>
<!-- 导航三内容 -->
&n
7fe0
bsp;           <div class="c-style three">
<a href="">内容1</a>
<a href="">内容2</a>
<a href="">内容3</a>
</div>
<!-- 导航四内容 -->
<div class="c-style four">
<a href="">内容1</a>
<a href="">内容2</a>
<a href="">内容3</a>
</div>
<!-- 导航五内容 -->
<div class="c-style five">
<a href="">内容1</a>
<a href="">内容2</a>
<a href="">内容3</a>
</div>
<!-- 导航六内容 -->
<div class="c-style six">
<a href="">内容1</a>
<a href="">内容2</a>
<a href="">内容3</a>
</div>
</div>
</div>

<script src="jquery-1.8.3.js"></script>   <!-- 此部分根据个人下载的jquery版本，进行添加 -->
<script src="aa.js"></script>
</body>

</html>

css : 此处为最简易样式，可根据个人需求去做调试更改

* {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

a {
text-decoration: none;
}

.menu {
width: 1000px;
margin: 20px auto;
position: relative;
}

.submenu .title {
display: inline-block;
width: 112px;
height: 37px;
line-height: 37px;
text-align: center;
color: #000;
font-weight: bold;
border-radius: 5px;
}

.submenu .title:hover {
background: #0CD0E4;
color: #fff;
}

.nav1 {
background: #0CD0E4;
color: #fff !important;
}

.content .c-style {
position: absolute;
width: 131px;
height: 78px;
left: -10px;
border: 1px solid #e7eaeb;
display:none;
}

.content .two {
left: 116px;
}

.content .three {
left: 225px;
}

.content .four {
left: 349px;
}

.content .five {
left: 471px;
}

.content .six {
left: 592px;
}

.content .c-style .aa {
display: block;
height: 27px;
line-height: 27px;
text-align: center;
color: #000;
}

.c-style .aa:hover {
color: #0CD0E4;
font-weight: bold;
}

js : ‍‍此处代码简洁易懂

‍ 1：确认事件“鼠标划入/划出”，即‍‍mouseover( ) 、mouseout( ) 2：找到导航，即$(".nav1") 3 : 确定显示/隐藏的内容，即$(".nav1").show( ) /$(".nav1").hide( ) 4 : 除划入导航栏外，还需考虑划入/划出，导航之下的内容，原理同上，仅更改对象即可

$(document).ready(function() {

//鼠标移入/移出导航一效果
$(".nav1").mouseover(function() {    //鼠标移入导航一
$(".one").show();                //显示
}).mouseout(function() {             //鼠标移出导航一
$(".one").hide();                //隐藏
})

$(".one").mouseover(function() {     //鼠标移入导航一之下内容
$(this).show();                  //显示
}).mouseout(function() {             //鼠标移出导航一之下内容
$(this).hide();                  //隐藏

})

//鼠标移入/移出导航二效果
$(".nav2").mouseover(function() {
$(".two").show();
}).mouseout(function() {
$(".two").hide();
})

$(".two").mouseover(function() {
$(".two").show();

}).mouseout(function() {
$(".two").hide();

})
})

当然，此方法只针对于二级导航少的情况，若导航划入/划出数量过多，此方法太繁琐，不适用。

用css中的：hover也可实现此效果！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 二级菜单 jquery简单基础 jquery鼠标滑过效果

相关文章推荐

新的分享

章节导航