css实现的滑动鼠标到img后切换图片移开恢复默认-前端开发

想要实现“滑动鼠标到img后切换图片”，一般可以通过CSS中的:hover伪类绑定图片的背景，实现移动到图片上的时候鼠标指针会变成手型，同时图片背景也会发生改变。而“移开恢复默认”可以通过给img标签添加鼠标离开事件mouseout来实现。

想要实现“滑动鼠标到img后切换图片”，一般可以通过CSS中的:hover伪类绑定图片的背景，实现移动到图片上的时候鼠标指针会变成手型，同时图片背景也会发生改变。而“移开恢复默认”可以通过给img标签添加鼠标离开事件mouseout来实现。

以下是具体的实现步骤：

创建一个包含想要实现效果的img标签。

<img src="img1.jpg" id="myImg">

使用CSS定义图片的样式，并将初始默认图片作为背景（background）属性。

#myImg {
    width: 500px;
    height: 300px;
    background-image: url('img1.jpg'); /*设置默认图片*/
    background-size: cover;
}

定义悬浮效果

#myImg:hover {
    background-image: url('img2.jpg'); /*设置悬浮后的图片*/
    cursor: pointer; /*指定鼠标指针变成手型*/
}

定义恢复默认效果

#myImg:mouseout {
    background-image: url('img1.jpg'); /*恢复默认图片*/
}

这样就实现了鼠标滑动到图片上时切换图片，移开后恢复默认的效果。

以下是示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>滑动鼠标实现图片切换</title>
    <style>
        #myImg {
            width: 500px;
            height: 300px;
            background-image: url('img1.jpg'); /*设置默认图片*/
            background-size: cover;
        }
        #myImg:hover {
            background-image: url('img2.jpg'); /*设置悬浮后的图片*/
            cursor: pointer; /*指定鼠标指针变成手型*/
        }
        #myImg:mouseout {
            background-image: url('img1.jpg'); /*恢复默认图片*/
        }
    </style>
</head>
<body>
    <img src="img1.jpg" id="myImg">
</body>
</html>

示例1：实现两张图片轮流切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮流切换图片</title>
    <style>
        #myImg {
            width: 500px;
            height: 300px;
            background-image: url('img1.jpg');
            background-size: cover;
        }
        #myImg:hover {
            background-image: url('img2.jpg');
            cursor: pointer;
        }
        #myImg:mouseout {
            background-image: url('img1.jpg');
        }
        #myImg.new:hover {
            background-image: url('img1.jpg');
        }
        #myImg.new:mouseout {
            background-image: url('img2.jpg');
        } 
    </style>
</head>
<body>
    <img src="img1.jpg" id="myImg">
    <script>
        var img = document.getElementById('myImg');
        setInterval(function() {
            if (img.classList == '') {
                img.classList.add('new');
            } else {
                img.classList.remove('new');
            }
        }, 2000);
    </script>
</body>
</html>

在添加了JS部分之后，我们实现了两张图片之间每隔2秒进行轮流切换。

示例2：通过CSS实现图片的放大缩小效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片放大缩小动画</title>
    <style>
        #myImg {
            width: 500px;
            height: 300px;
            background-image: url('img1.jpg');
            background-size: cover;
            transition: all 1s ease; /*定义过渡效果*/
        }
        #myImg:hover {
            cursor: pointer;
            transform: scale(1.1); /*鼠标悬浮时进行图片放大效果*/
        }
    </style>
</head>
<body>
    <img src="img1.jpg" id="myImg">
</body>
</html>

在添加了transition属性之后，我们实现了图片的缩放动画效果。

基础教程推荐