css鼠标经过变换图片

基础概念

CSS鼠标经过变换图片是一种常见的网页交互效果，通过CSS的:hover伪类实现。当用户将鼠标悬停在某个元素上时，该元素的背景图片会发生变化，从而提供视觉反馈。

类型

背景图片变换：通过改变元素的background-image属性实现。
图片替换：通过改变元素的src属性实现（通常用于<img>标签）。

应用场景

导航菜单：在导航菜单中，鼠标悬停时改变图标或背景颜色，提示用户当前可点击状态。
产品展示：在产品列表或详情页中，鼠标悬停时显示产品的放大图或详细信息。
按钮效果：在按钮上应用鼠标悬停效果，增强按钮的交互感。

示例代码

以下是一个使用CSS实现鼠标悬停变换背景图片的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Hover Image Change</title>
    <style>
        .hover-image {
            width: 200px;
            height: 200px;
            background-image: url('https://via.placeholder.com/200');
            background-size: cover;
            transition: background-image 0.5s ease-in-out;
        }

        .hover-image:hover {
            background-image: url('https://via.placeholder.com/200/FF5733/FFFFFF');
        }
    </style>
</head>
<body>
    <div class="hover-image"></div>
</body>
</html>