需求說明

制作京東首頁右側的固定層，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

京東首頁右側固定層

就東會員

購物車

我的關注

我的足跡

我的消息

咨詢JIMI

總結

以上是生活随笔為你收集整理的java京东左侧固定层_京东首页右侧固定层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。