图片隐藏显示

最新推荐文章于 2024-08-14 11:52:41 发布

sksjxx

最新推荐文章于 2024-08-14 11:52:41 发布

阅读量84

点赞数

文章标签： linq javascript jquery

本文链接：https://blog.csdn.net/sksjxx/article/details/122992502

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东首页右侧固定层</title>
    <link href="css/nav.css" rel="stylesheet">
</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>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function (){
     $("#nav li span").mouseover(function (){
         $(this).css("background-color","red")
         //當前span的下標=index
         let index=$("#nav li span").index(this)
         //用span的下標儅li的下標
         //根據eq拿去li下標后代span的同輩p顯示
         $("#nav li:eq("+index+") span~p").show()
     }).mouseout(function (){
         $(this).css("background-color"," #7a6e6e")
         let index=$("#nav li span").index(this)
         $("#nav li:eq("+index+") span~p").hide()
     })
    })
</script>
</body>
</html>

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;
}

sksjxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片隐藏显示

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>京东首页右侧固定层</title> <link href="css/nav.css" rel="stylesheet"></head><body><nav id="nav"> <li><span.
复制链接

扫一扫