1、鼠标经过导航中li时，一个活动的li跟随鼠标移动，最终移动到鼠标的停留的位置。（如需鼠标离开后让活动的li回到初始位置，则用jq hover事件，当鼠标离开时，给活动的li设置left是0）
2、鼠标经过div时，图片放大，layer层出现
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .con { margin: 20px auto; width: 200px; border: 1px solid #ccc; position: relative } .con_layer { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background-color: #000; opacity: 0; z-index: 10; transition: all 1s linear 0s; } .con_img { width: 100%; height: 200px; overflow: hidden; z-index: 1; } .con img { width: 100%; transition: all 1s linear 0s; } .con:hover img { transform: scale(1.2) } .con:hover .con_layer { opacity: 0.5; } .line { margin: 60px auto; border: 1px solid #fff; width: 0; } .para { color: #fff; margin: 40px auto; text-align: center; } .clearfix { zoom: 1; } .clearfix:after { content: "."; display: block; width: 0; height: 0; clear: both; visibility: hidden } .nav { background-color: #0099cc; list-style: none; position: relative; z-index: 999 } .nav li { float: left; width: 200px; height: 46px; line-height: 46px; text-align: center; cursor: pointer; transition: all 0.5s linear 0s; -webkit-transition: all 0.2s linear 0s; -moz-transition: all 0.2s linear 0s; -ms-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; } .nav li a { display: block; width: 100%; height: 100%; color: #fff; text-decoration: none; } .nav li:hover a { font-weight: bold; } .nav .nav_bg { position: absolute; left: 0; top: 0; background-color: #FF9900; z-index: -1; border-radius: 5px; box-shadow: 0px 0px 4px #333 } .next { padding: 0 20px; width: 200px; height: 36px; margin: 20px; border: 1px solid #ccc; border-radius: 5px; background: red url("ico-bg.png") no-repeat center; transition:all 1s linear 0s; } .next:hover { background:green url("ico-bg.png") no-repeat 200px center; } </style> </head> <body> <div class="con"> <div class="con_img"> <img src="1.jpg" alt=""/> </div> <div class="con_layer"> <div class="para">我是图文解说</div> <div class="line"></div> </div> <p> 我是图文解说我是图文解说 我是图文解说我是图文解说 我是图文解说我是图文解说 我是图文解说我是图文解说 我是图文解说我是图文解说 我是图文解说我是图文解说 </p> </div> <ul class="nav clearfix"> <li><a href="javascript:void (0);">111</a></li> <li><a href="javascript:void (0);">222</a></li> <li><a href="javascript:void (0);">333</a></li> <li><a href="javascript:void (0);">444</a></li> <li><a href="javascript:void (0);">555</a></li> <li><a href="javascript:void (0);">666</a></li> <li class="nav_bg"></li> </ul> <div class="next"></div> </body> <script src="jquery-1.11.3.min.js"></script> <script> $(".con").hover(function () { $(".line").animate({ "120px"}, 1000) }, function () { $(".line").animate({ 0}, 1000) }); var flag = 200; $(".nav").find("li").on("mouseover", function () { var $index = $(this).index(); $(".nav_bg").css({left: $index * flag + "px"}) }); /* $(".nav").find("li").hover(function () { var $index = $(this).index(); $(".nav_bg").css({left: $index * flag + "px"}) },function(){ $(".nav_bg").css({left:0}) })*/ </script> </html>