需求說明
制作京東首頁右側的固定層，6個圖標：京東會員、購物車、我的關注、我的足跡、我的消息和咨詢JIMI
默認狀態下僅顯示圖標，背景顏色為深灰色；當鼠標移至圖標上時，背景顏色為深紅色，並且顯示文本
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 span:hover{ background-color: red;}
#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: red;
color: #ffffff;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 35px;
padding-left: 10px;
display: none;
}
js（jquery-1.12.4.js"）
$(document).ready(function () {
var index=-1;
$("#nav li>span").mouseover(function () {
index=$("#nav li>span").index($(this));
$("#nav li:eq("+index+") span~p").show();
}).mouseout(function () {
$("#nav li:eq("+index+") span~p").hide();
});
})
html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>京東首頁右側固定層</title> <link href="css/Fang1.css" rel="stylesheet"> <script src="js/jquery-1.12.4.js"></script> <script src="js/Fang1.js"></script> </head> <body> <nav id="nav"> <li><span></span><p>就東會員</p></li> <li><span></span><p>購物車</p></li> <li><span></span><p>我的關注</p></li> <li><span></span><p>我的足跡</p></li> <li><span></span><p>我的消息</p></li> <li><span></span><p>咨詢JIMI</p></li> </nav> </body> </html>