css精灵和hover伪类的联合使用

Posted 2022-12-10 你的指尖-有改变世界的力量

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css精灵和hover伪类的联合使用相关的知识，希望对你有一定的参考价值。

效果如下：

鼠标放上前：

鼠标放上后：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .sun
            width: 200px;
            height: 274px;
            background: url("img/timg.jpg") no-repeat;
        
        .sun:hover
            background: url("img/timg.jpg") no-repeat -200px;
        
    </style>
</head>
<body>
<div class="sun">

</div>
</body>
</html>

以上是关于css精灵和hover伪类的联合使用的主要内容，如果未能解决你的问题，请参考以下文章