代码
1.HTML文件

<title>京东首页右侧固定层</title>
<link href="css/nav.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/js.js"></script>

</head>
<body>
<nav id="nav">
<li>就东会员</li>
<li>购物车</li>
<li>我的关注</li>
<li>我的足迹</li>
<li>我的消息</li>
<li>咨询JIMI</li>
</nav>
</body>
</html>

2.JS文件

$(document).ready(function() {$ ("#nav li span").mouseover(function(){
var index= $("#nav li span").index(this);$ ("#nav li:eq("+index+") span~p").show();
$(this).css("background-color","#c81623"); })$ ("#nav li span").mouseout(function(){
var index= $("#nav li span").index(this);$ ("#nav li:eq("+index+") span~p").hide();
$(this).css("background-color","#7a6e6e");
})
});

3.CSS文件

*{margin: 0; padding:0; font-size: 12px;}
ul,ol,li{list-style: none;}

nav{width: 100px; margin: 0 auto;}

nav li{height:36px;}

nav li span{

display: block;
float: right;
width: 35px;
height: 35px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
background: #7a6e6e url("../images/toolbars.png") no-repeat;

}

nav li:nth-of-type(1) span{background-position: 0px -15px;}

nav li:nth-of-type(2) span{background-position: 0px -57px;}

nav li:nth-of-type(3) span{background-position: 1px -106px;}

nav li:nth-of-type(4) span{background-position: 0px -156px;}

nav li:nth-of-type(5) span{background-position: 0px -200px;}

nav li:nth-of-type(6) span{background-position: 2px -265px;}

nav li p{

height: 35px;
text-align: left;
background: #c81623;
color: #ffffff;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 35px;
padding-left: 10px;
display: none;

}

效果

image.png

2019-05-06 京东右侧固定层