Bootstrap 5：如何用纯CSS实现卡片悬停时显示/隐藏按钮

当然可以只通过CSS实现这个效果，你的现有CSS存在选择器写法错误，调整后就能达到需求：

问题分析 #

你原来的CSS选择器.btnShopNow .card写反了，这会选中带有.btnShopNow类元素下的.card，但我们需要的是选中.card内的按钮，并且初始隐藏它。

修正后的CSS代码 #

/* 初始隐藏按钮 */
.card #btnShopNow {
    display: none;
}

/* 卡片悬停时的基础样式 */
.card:hover {
    transform: scale(1.1);
    background-color: #f8f9fa;
    /* 可选：添加过渡让动画更平滑 */
    transition: all 0.3s ease;
}

/* 卡片悬停时显示按钮 */
.card:hover #btnShopNow {
    display: inline-block; /* 用inline-block保持Bootstrap按钮的默认行内块特性 */
}

完整的卡片示例HTML #

如果你的卡片是标准Bootstrap 5结构，可以参考这个完整代码：

<div class="card" style="width: 18rem; overflow: hidden;"> <!-- 加overflow:hidden防止缩放时内容溢出 -->
    <img src="your-image.jpg" class="card-img-top" alt="Card image">
    <div class="card-body">
        <h5 class="card-title">商品标题</h5>
        <p class="card-text">这里是商品的简短描述内容，用来填充卡片主体部分。</p>
        <div class="card-text">
            <button type="button" id="btnShopNow" class="btn btn-primary">Shop Now</button>
        </div>
    </div>
</div>

补充提示 #

• 给.card加上overflow: hidden可以避免卡片缩放时内部内容超出边界
• 添加transition属性能让缩放、按钮显示的动画更流畅自然
• 如果你有多个卡片，建议把按钮的id换成类名（比如btn-shop-now），这样样式可以复用

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