<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } a{ color: #000; text-decoration: none; } body{ background: #000; height: 2000; } em{ font-style: normal; } #wrap{ width: 160px; position: fixed;/*固定定位*/ right: 0; } #wrap a{ display: block;/*行转块*/ line-height: 30px; border-bottom:2px solid #ddd ;/*下边框 粗细 样式 颜色*/ background: #fff; position: relative;/*参照物 找父级*/ padding-left: 34px; right: -130px; } #wrap a em{ display: block; width: 30px; height: 30px; background: #0066cc; color: #fff; font-weight: bold; text-align: center; position: absolute;/*绝对定位 改变盒子的位置*/ left: 0; } #wrap a:hover{ color: #50C3EB; } #wrap a:hover em{ background: #459DF5; } </style> </head> <body> <div id="wrap"> <a href="#"><em>0</em>HTML</a> <a href="#"><em>1</em>JAVASCRIP</a> <a href="#"><em>2</em>JAVA</a> <a href="#"><em>3</em>ACTIONSCRIPT</a> <a href="#"><em>4</em>Perl</a> <a href="#"><em>5</em>PHP</a> <a href="#"><em>6</em>NODE.JS</a> <a href="#"><em>7</em>GO</a> <a href="#"><em>8</em>C#</a> <a href="#"><em>9</em>C++</a> <a href="#"><em>10</em>PHP</a> <a href="#"><em>11</em>ACTION</a> <a href="#"><em>12</em>SCRIPT</a> </div> </body> </html> <script type="text/javascript" src="jQuery/jquery-3.1.1.min.js"> </script> <script type="text/javascript"> /** * */ var timer = null; $('#wrap').hover(function(){ //鼠标滑入 var This = $(this);// timer = setTimeout(function(){ This.find('a').each(function(i){ var $This = $(this);//当前a setTimeout(function(){ $This.animate({right:'0px'},300); },i*50); }); },300);//定时器 },function(){ //鼠标滑出 if(timer){ clearTimeout(timer); } This = $(this);// $(this).find('a').each(function(i){ var $This = $(this);//当前a setTimeout(function(){ console.log(); $This.animate({right:'-130px'},300); },i*50); }); });//鼠标划过 </script> <!-- a标签 行内元素 不能设置宽高 display: block; 行转块元素 会换行 浮动 定位会使元素脱离文档流 -->