JS_DOM事件之鼠标事件之随鼠标移动

导航栏背景随鼠标移动的案例

 

HTML:

 1 <div class="content">
 2         <nav class="navigation">
 3             <ul id="nav">
 4                 <li>首页新闻</li>
 5                 <li>公司简介</li>
 6                 <li>活动策划</li>
 7                 <li>企业文化</li>
 8                 <li>招聘信息</li>
 9                 <li>员工天地</li>
10                 <li>招聘信息</li>
11                 <li>项目企划</li>
12             </ul>
13             <div class="clearfix"></div>
14             <img src="./images/cloud.gif" class="moveObj" id="moveObj">
15         </nav>
16     </div>

CSS:

 1 <style>
 2 *{
 3     padding: 0;
 4     margin:0;
 5     box-sizing: border-box;
 6 }
 7 .clearfix{
 8     clear: both;
 9 }
10 .content{
11     background: #000;
12     width: 100%;
13     height: 630px;
14     padding-top: 100px;
15 }
16 .navigation{
17     width: 900px;
18     height: 45px;
19     margin: 0 auto;
20     border-radius:10px; 
21     background:#fff url('../images/rss.png') no-repeat right center;
22     position: relative;
23 }
24 .navigation>ul{
25     list-style: none;
26     width: 666px;
27     height: 45px;
28     position: relative;
29     z-index: 10;
30 }
31 
32 .navigation>ul>li{
33     float: left;
34     width: 83px;
35     height: 45px;
36     line-height: 45px;
37     text-align: center;
38     cursor: pointer;
39 }
40 .moveObj{
41     position: absolute;
42     left: 0;
43     top: 0;
44     z-index: 5;
45 }
46 </style>

View Code