划过样式——精灵图

最新推荐文章于 2024-10-13 17:00:37 发布

小须美鱥

最新推荐文章于 2024-10-13 17:00:37 发布

阅读量63

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/Agress726901/article/details/129171255

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初始样式

划过样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        div{
            width: 1170px;
            margin: 100px auto;
            background-color: purple;
        }
        div li{
            width: 25%;
            height: 300px;
            float: left;
            background-color: pink;
        }
        /* 初始状态给p标签添加背景图(精灵图) */
        div li p{
            width: 141px;
            height: 141px;
            background-color: plum;
            margin: 0 auto;
            position: relative;
            background: url(../images/精灵图.png) no-repeat;
        }
        /* 划过之后,给p标签添加新的背景图 */
        div li:hover p{
            background: url(../images/小红.png) no-repeat;
        }
        /* 把背景图定位到元素外面,达到隐藏的效果. */
        div li p img{
            position: absolute;
            top: -100px;
        }
        /* 划过后,背景图恢复原位,达到效果 */
        div li:hover img{
            top: 0px;
            transition: all 0.5s;
        }
        /* 选中更改第二个盒子第一次添加的背景图的位置,以便让第二个精灵图在第二个窗口露出来 */
        div li:nth-child(2) p{
            background-position: -300px 0;
        }
        /* 由于更改背景图的位置,导致第一个和第二此添加的背景图位置都发生改变,所以要在划过时再把位置更改过来 */
        div li:nth-child(2):hover p{
            background-position: 0 0;
        }
        /* 以下原理与上面两个相同 */
        div li:nth-child(3) p{
            background-position: -612px 0;
        }
        div li:nth-child(3):hover p{
            background-position: 0 0;
        }
        div li:nth-child(4) p{
            background-position: -926px 0;
        }
        div li:nth-child(4):hover p{
            background-position: 0 0;
        }
    </style>
</head>
<body>
    <div>
        <li>
            <p>
                <img src="../images/m2.png" alt="">
            </p>
        </li>
        <li>
            <p>
                <img src="../images/m4.png" alt="">
            </p>
        </li>
        <li>
            <p>
                <img src="../images/m6.png" alt="">
            </p>
        </li>
        <li>
            <p>
                <img src="../images/m8.png" alt="">
            </p>
        </li>
    </div>
</body>
</html>