【前端每日一题】用纯CSS实现以下效果

最新推荐文章于 2024-01-31 23:27:49 发布

Iman-Xu

最新推荐文章于 2024-01-31 23:27:49 发布

阅读量233

点赞数

分类专栏：每日一题文章标签： css 前端 css3

本文链接：https://blog.csdn.net/m0_61215908/article/details/127451441

版权

每日一题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

题目描述：

用纯CSS实现：鼠标移到哪个圆圈上，该圆圈包括它前面的圆圈都变为实心。

思考过程：

用JS很容易实现，但用纯CSS还是第一次做。

首先一排的圆圈，就会想到无序列表，接着选中的元素为包括自己和自己前面的元素，就可以想到兄弟选择器~（会选中排在自己后面的同类元素），这两种是相反的情况。通过相反可以想到flex布局中有从右到左的方向属性。

代码：

//html,为了增加区别，我给每个li加了数字
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

//CSS
ul{
    display: flex;
    flex-direction: row-reverse; //从右往左
}
li{
    margin: 10px;
    list-style: none;
    height: 20px;
    width: 20px;
    border: 1px solid black;
    border-radius: 50%;
    text-align: center;
}
li:hover ~li,li:hover{    //~li是除了本身的，所以要加上自己
    background-color: pink;
}

效果图：