互联网试喝长岛冰茶 2024-05-28 20:09 采纳率: 0%
浏览 489

html5中怎么实现一张图片鼠标悬停变成另一张图片

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/98ff1490cdd84e4aa48da3c914005078.jpeg "#left"）

  • 写回答

2条回答 默认 最新

  • 阿里嘎多学长 2024-05-28 20:09
    关注

    以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

    要在HTML5页面中实现鼠标悬停在一张图片上时切换成另一张图片的效果，你可以使用CSS来设置图片在鼠标悬停时的背景图片，并在鼠标离开时恢复原图。以下是具体的实现方法：

    首先，你需要准备两张图片，一张是默认显示的图片，另一张是鼠标悬停时显示的图片。

    然后，你可以使用CSS的:hover伪类选择器来改变鼠标悬停时的样式。

    这里有一个简单的示例代码：

    HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换示例</title>
    <style>
        /* 设置图片容器的样式 */
        .image-container {
            width: 200px; /* 根据需要调整 */
            height: 200px; /* 根据需要调整 */
            overflow: hidden; /* 隐藏溢出部分 */
            position: relative; /* 设置为相对定位 */
        }

        /* 设置默认图片的样式 */
        .default-image {
            width: 100%; /* 图片宽度占满容器 */
            height: auto; /* 高度自适应 */
            transition: opacity 0.5s; /* 平滑过渡效果 */
        }

        /* 设置鼠标悬停时的图片样式 */
        .hover-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s; /* 平滑过渡效果 */
        }

        /* 鼠标悬停时改变图片 */
        .image-container:hover .default-image {
            opacity: 0;
        }

        .image-container:hover .hover-image {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <!-- 默认图片 -->
        <img src="default-image.jpg" alt="默认图片" class="default-image">
        <!-- 鼠标悬停时的图片 -->
        <img src="hover-image.jpg" alt="悬停图片" class="hover-image">
    </div>
</body>
</html>

    在这个示例中，.image-container 是一个容器，它包含了两张图片：.default-image 是默认显示的图片，.hover-image 是鼠标悬停时显示的图片。通过设置opacity属性和transition属性，可以实现平滑的图片切换效果。

    参考资料：

    请注意，你需要将示例中的default-image.jpg和hover-image.jpg替换为你自己的图片路径。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 5月28日