如何用CSS实现卡片内图片的鼠标悬停切换效果？

方法一：纯CSS实现（无需JavaScript） #

这种方法无需修改卡片核心结构，仅通过在图片容器内添加第二张图片，利用CSS控制悬停时的显示状态，完全不影响卡片本身样式。

修改后的HTML代码 #

<div class="container">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-6">
        <!-- 1 Alexis -->
        <div class="col" style="margin-bottom: 2rem;">
            <div class="card card-team h-100">
                <!-- 新增图片容器，用于控制两张图片的层级与显示 -->
                <div class="image-hover-container" style="text-align: center; position: relative; display: inline-block;">
                    <!-- 原图片 -->
                    <img src="./src/img/nosotros/AlexisSanchez.jpeg"
                        style="width: 150px; height: 150px; margin-top: 1rem;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);"
                        class="img-fluid rounded" alt="Alexis">
                    <!-- 悬停显示的图片，默认隐藏 -->
                    <img src="./src/img/nosotros/AlexisSanchez-hover.jpeg"
                        style="width: 150px; height: 150px; margin-top: 1rem;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.3s ease;"
                        class="img-fluid rounded" alt="Alexis 悬停">
                </div>
                <div class="card-body">
                    <div class="title__card">
                        <span>Alexis Sánchez León</span>
                    </div>
                    <div class="subtitle__card">
                        <span>Desarrollador Java | Ing. Industrial</span>
                    </div>
                    <p class="card-text" style="text-align: justify;">Soy un desarrollador Java, enfocado en
                        el frontend y en la gestión de proyectos con el marco de trabajo SCRUM para la
                        entrega de valor oportuna.</p>
                </div>
                <!-- redes sociales -->
                <div class="social__media card-footer ">
                    <a href="https://github.com/ALEXISSL10" target="_blank"><span><i
                                class="bi bi-github social__media__icon"></i></span></a>
                    <a href="https://www.linkedin.com/in/alexis-s%C3%A1nchez-le%C3%B3n"
                        target="_blank"><span><i class="bi bi-linkedin social__media__icon"></i></span></a>
                </div>
            </div>
        </div>
    </div>
</div>

配套CSS样式（可放在<style>标签或外部样式表） #

/* 悬停时切换两张图片的透明度，实现平滑过渡 */
.image-hover-container:hover img:first-child {
    opacity: 0;
}
.image-hover-container:hover img:last-child {
    opacity: 1;
}

注：建议将图片容器的内联样式移到CSS类中，让代码更整洁。

方法二：JavaScript实现（修改图片src属性） #

如果不想添加额外图片标签，可以通过监听鼠标事件直接修改原图片的src属性，同样不会改动卡片本身结构。

修改后的HTML代码（仅给图片添加标识类与悬停图地址） #

<div class="container">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-6">
        <!-- 1 Alexis -->
        <div class="col" style="margin-bottom: 2rem;">
            <div class="card card-team h-100">
                <div style="text-align: center;">
                    <!-- 添加类与data属性存储悬停图地址 -->
                    <img src="./src/img/nosotros/AlexisSanchez.jpeg"
                        style="width: 150px; height: 150px; margin-top: 1rem;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);"
                        class="img-fluid-hover img-fluid rounded" alt="Alexis"
                        data-hover-src="./src/img/nosotros/AlexisSanchez-hover.jpeg">
                </div>
                <div class="card-body">
                    <div class="title__card">
                        <span>Alexis Sánchez León</span>
                    </div>
                    <div class="subtitle__card">
                        <span>Desarrollador Java | Ing. Industrial</span>
                    </div>
                    <p class="card-text" style="text-align: justify;">Soy un desarrollador Java, enfocado en
                        el frontend y en la gestión de proyectos con el marco de trabajo SCRUM para la
                        entrega de valor oportuna.</p>
                </div>
                <!-- redes sociales -->
                <div class="social__media card-footer ">
                    <a href="https://github.com/ALEXISSL10" target="_blank"><span><i
                                class="bi bi-github social__media__icon"></i></span></a>
                    <a href="https://www.linkedin.com/in/alexis-s%C3%A1nchez-le%C3%B3n"
                        target="_blank"><span><i class="bi bi-linkedin social__media__icon"></i></span></a>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript代码（放在<body>末尾或外部JS文件） #

// 获取所有需要悬停切换的图片
const hoverImages = document.querySelectorAll('.img-fluid-hover');

hoverImages.forEach(img => {
    const originalSrc = img.src;
    const hoverSrc = img.dataset.hoverSrc;

    // 鼠标移入时切换为悬停图
    img.addEventListener('mouseover', () => {
        img.src = hoverSrc;
    });

    // 鼠标移出时恢复原图
    img.addEventListener('mouseout', () => {
        img.src = originalSrc;
    });
});

以上两种方案均只针对图片元素操作，不会改动卡片本身的结构与样式，完全满足需求。

内容的提问来源于stack exchange，提问作者ROBERTO RIVAS MONZON