当鼠标移入时,导航显示,移出就隐藏
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nave{
height: 100px;
width: 100%;
background: cornflowerblue;
}
.left{
position: absolute;
top: 100px;
left: 0;
height: 100%;
width:200px;
background: chartreuse;
}
.right{
position: absolute;
top:100px;
left: 200px;
height: 100%;
width: 100%;
background: blue;
}
.left>ul>li{
height: 50px;
width:200px;
line-height: 50px;
border: 1px solid black;
}
span{
width: 400px;
height: 400px;
}
.page_one{
position:absolute ;
left:200px;
top: 0;
/*border: 1px solid black;*/
background: white;
z-index: 2;
display: none;
}
.page_tow{
position:absolute ;
left:200px;
top: 50px;
/*border: 1px solid crimson;*/
background: silver;
display: none;
z-index: 2;
}
.page_three{
position:absolute ;
left:200px;
top: 100px;
/*border: 1px solid aliceblue;*/
background: cyan;
display: none;
z-index: 2;
}
.mouse{
position: fixed;
height:50px;
width: 50px;
background: red;
border-radius:50% ;
z-index: 3;
}
</style>
</head>
<body>
<div class="mouse"></div>
<div class="nave"></div>
<div class="left">
<ul>
<li>
<a>首页</a>
<span class="page_one"></span>
</li>
<li>
<a>关于我们</a>
<span class="page_tow">2222</span>
</li>
<li>
<a>新闻中心</a>
<span class="page_three">11111111</span>
<ul>
<li><span class="page_three"></span></li>
</ul>
</li>
</ul>
</div>
<div class="right">
</div>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
console.log($("left>ul>li").children("ul"));
$(function(){
$(".left>ul>li").mouseover(function(){
// alert("1");
$(".page_tow").stop().slideDown();
// $(this).children("span").stop().slideDown();
// console.log($(this).children("span"));
})
$(".left>ul>li").mouseout(function(){
$(this).children("span").stop().slideUp();
})
// 鼠标跟随
$(document).mousemove(function(e) {
// clientX返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标
var x = e.pageX + "px";
var y=e.pageY+"px";
$(".mouse").css("left", x);
$(".mouse").css("top", y);
// span[0].style.left = event.clientX + "px";
// span[0].style.top = event.clientY + "px";
});
})
</script>
</body>
</html>
运行截图