Bootstrap 5 Card中如何实现图片hover与stretched-link共存

问题根源 #

Bootstrap的stretched-link会为链接生成一个position: absolute的伪元素，这个元素会覆盖整个.card容器，导致.my-image无法接收到鼠标hover事件，所以你的CSS hover规则失效。

方案1：纯CSS修复（推荐，无需JS） #

直接修改CSS选择器，将hover触发目标从.my-image改为.card，这样只要鼠标悬停在卡片区域（包括被stretched-link伪元素覆盖的部分），就能触发图片切换：

.my-image .mainImage {
  display: block;
}

.my-image .hoverImage {
  display: none;
}

/* 改为监听卡片的hover事件 */
.card:hover .my-image .mainImage {
  display: none;
}

.card:hover .my-image .hoverImage {
  display: block;
}

方案2：JavaScript实现 #

如果需要用JS控制hover效果，可以监听卡片的mouseenter和mouseleave事件，手动切换图片的显示状态：

HTML结构（无需改动）

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="my-image">
                    <img th:src="@{/images/a.png}" class="mainImage card-img-top" alt="...">
                    <img th:src="@{/images/a_hov.png}" class="hoverImage card-img-top" alt="...">
                </div>
                <div class="card-body">
                    <h5 class="card-title">Content</h5>
                    <p class="card-text">View and update the content</p>
                    <a href="https://www.example.com/content" class="card-link stretched-link"></a>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript代码

// 获取所有带图片切换的卡片
const cards = document.querySelectorAll('.card');

cards.forEach(card => {
    const mainImg = card.querySelector('.mainImage');
    const hoverImg = card.querySelector('.hoverImage');

    // 鼠标进入卡片时显示hover图
    card.addEventListener('mouseenter', () => {
        mainImg.style.display = 'none';
        hoverImg.style.display = 'block';
    });

    // 鼠标离开卡片时恢复主图
    card.addEventListener('mouseleave', () => {
        mainImg.style.display = 'block';
        hoverImg.style.display = 'none';
    });
});

说明 #

两种方案都能解决问题，纯CSS方案更简洁高效，推荐优先使用；JS方案适合需要更复杂交互逻辑的场景。

内容的提问来源于stack exchange，提问作者Kalry