悬停时更改 Bootstrap 卡片文字

Question

我在一个网站上工作，其中有一个产品列表（显示在 bootstrap 卡片中）我希望能够在用户将鼠标悬停在卡片上时将其更改为完全不同的文本（隐藏或替换原文）。有谁知道任何优雅的解决方案或任何指示？谢谢

Answer 1

您可以制作 2 个包含文本和文本悬停的 div，并根据卡片悬停切换显示属性

.card-hover-text{
    display:none;
}
.card:hover .card-text{
    display:none;
}
.card:hover .card-hover-text{
    display:block;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_180284fd0bb%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_180284fd0bb%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <p class="card-hover-text">New text</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

悬停时更改 Bootstrap 卡片文字

Changing Bootstrap card text on hover

html

javascript

css

bootstrap-5