CSS中实现鼠标移过变图片效果的方法

发布时间：2023-09-15 14:49:58 所属栏目：语言来源：

导读：在css中，想要实现鼠标滑过改变图片的效果还是得需要用到:hover选择器和background-image属性。

其中:hover选择器是用来选中鼠标滑过时的状态并且设置样式，background-image属性用于设置元素的背景图片。

示

在css中，想要实现鼠标滑过改变图片的效果还是得需要用到:hover选择器和background-image属性。

其中:hover选择器是用来选中鼠标滑过时的状态并且设置样式，background-image属性用于设置元素的背景图片。

示例如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style type="text/css">

            div{

                width: 380px;

                height: 250px;

                background-image: url(1118.02.png);

            }

            div:hover{

               width: 380px;

                height: 250px;

                background-image: url(1118.01.png);

            }

        </style>

    </head>

    <body>

        <div>鼠标移动到图片上</div>

    </body>

</html>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!