伪类：after的使用以及结合attr来添加属性的技巧

最新推荐文章于 2023-09-13 17:22:43 发布

weixin_33834910

最新推荐文章于 2023-09-13 17:22:43 发布

阅读量356

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Model-Zachary/p/6130378.html

本文介绍了一种使用CSS实现固定位置侧边栏的方法，并通过:hover伪类和attr属性巧妙地展示列表项的文字说明。该技巧适用于网页设计中需要美观且交互良好的侧边栏场景。

本案例以实现侧边栏的效果为例来说明

直接上代码看效果：

css

<style type="text/css">
        *{margin:0;padding:0;list-style: none;}
        
        ul{position: fixed; right:0;top:50%;  transform: translate(0,-50%); }
        li{width:20px; height:20px; background:#666 url(img/i1.png) no-repeat center center;padding:5px; margin: 10px 0; border-radius:4px 0 0 4px ;cursor: pointer;position: relative;  }
        li:nth-of-type(2){ background-image: url(img/i2.png); }
        li:nth-of-type(3){ background-image: url(img/i3.png); }
        
        li:after{ content:attr(name); width:80px; line-height:30px; background-color:#900; position: absolute;top:0; right:-90px;color:#fff;padding-left: 10px; 
            transition:all .5s; 
            z-index: -1;  }

        li:hover:after{ right:30px; }
        li:hover{ border-radius: 0; background-color: #900; }
    </style>

html

利用name像id，class那样是元素都可以添加的特征，然后利用attr在css里来添加属性，再让其在：after里面进行添加内容为文字

这种运用方式很巧妙

<ul>
        <li name="购物车"></li>
        <li name="我的关注"></li>
        <li name="我的脚印"></li>
    </ul>

转载于:https://www.cnblogs.com/Model-Zachary/p/6130378.html