在CSS中通过悬停更改图片

Question

`大家好 我正在开发的 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;">
                                <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">
                            </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>

`

我尝试更改卡片内的图像

Answer 1

.static {
    position:absolute;
    background: white;
  }
  
  .static:hover {
    opacity:0;
  }

<div class="col" style="margin-bottom: 2rem;">
                        <div class="card  card-team h-100">
                            <div style="text-align: center;">
                                <img src="src/img/nosotros/alexis-normal.jpg" style="width: 150px; height: 150px; margin-top: 1rem;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);"
                                class="img-fluid rounded static" alt="Alexis"><img class="active" src="src/img/nosotros/alexis-pintado.jpg" 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">
                            </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>