jQuery鼠标事件例子1
常常会用到左侧导航菜单栏，下面是一个简单的例子记录。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>左侧导航菜单</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("div#leftMenu")
.css("background-color", "chartreuse")
.css("border", "dotted thin red")
.css("width", "280px")
.css("left", "0px")
.css("top", "0px")
.css("position", "absolute"); //绝对定位
$("div#leftMenu>ul>li~div") //选择li标签后的同级div元素
.css("display", "none"); //隐藏
$("div#leftMenu>ul>li") //选择li元素
.click(function() { //点击事件
$("div#leftMenu>ul>li~div").css("display", "none"); //先把全部子菜单隐藏
$(this).next().css("display", "block"); //this作用：选择鼠标所在的li元素，next（）是下一个元素（即此li元素下的子菜单），将其显示
})
.mouseover(function() { //鼠标移上去执行函数
$(this)
.css("background-color", "orange")
.css("color", "white")
.css("font-weight", "bold");
})
.mouseout(function() { //鼠标移开去执行函数
$(this)
.css("background-color", "lightskyblue")
.css("color", "black")
.css("font-weight", "normal");
});
$("dd")
.mouseover(function() {
$(this)
.css("background-color", "pink")
.css("color", "blueviolet")
.css("font-weight", "bold");
})
.mouseout(function() {
$(this)
.css("background-color", "chartreuse")
.css("color", "black")
.css("font-weight", "normal");
});
});
</script>
<style type="text/css">
ul {
padding: 0px;
margin: 0px;
}
li {
list-style: none;
padding: 10px;
margin: 2px;
text-align: center;
background-color: lightskyblue;
}
dd {
padding: 4px;
margin: 3px;
text-align: center;
}
</style>
</head>
<body>
<div id="leftMenu">
<ul>
<li>菜单一</li>
<div class="subMenu">
<dd>子菜单11</dd>
<dd>子菜单12</dd>
<dd>子菜单13</dd>
<dd>子菜单14</dd>
</div>
<li>菜单二</li>
<div class="subMenu">
<dd>子菜单21</dd>
<dd>子菜单22</dd>
<dd>子菜单23</dd>
<dd>子菜单24</dd>
</div>
<li>菜单三</li>
<div class="subMenu">
<dd>子菜单31</dd>
<dd>子菜单32</dd>
<dd>子菜单33</dd>
<dd>子菜单34</dd>
</div>
<li>菜单四</li>
<div class="subMenu">
<dd>子菜单41</dd>
<dd>子菜单42</dd>
<dd>子菜单43</dd>
<dd>子菜单44</dd>
</div>
<li>菜单五</li>
<div class="subMenu">
<dd>子菜单51</dd>
<dd>子菜单52</dd>
<dd>子菜单53</dd>
<dd>子菜单54</dd>
</div>
</ul>
</div>
<p style="margin-top: 400px;">jQuery鼠标事件例子1：鼠标事件有 click（）--单击事件、mouseover（）--鼠标移上去事件、mouseout（）--鼠标移开事件，以及原生的jquery隐藏和显示子菜单的方法（即不是调用的hide（）、show（）方法）。</p>
</body>
