在沒有 javascript 的 hover 上顯示/隱藏 div 子項

Question

我有一堆重復卡：

<div id="container">
    <div class="card">
        <div class="card_img"><img src="/img.jpg"></div>
        <div class="card_text">Title</div>
        <div class="card_moreinfo">More info</div>
    </div>
    ...
    <div class="card">
        <div class="card_img"><img src="/img.jgp"></div>
        <div class="card_text">Title</div>
        <div class="card_moreinfo">More info</div>
    </div>
</div>

容器樣式類似於：

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

卡片樣式類似於：

.card {
    flex: 0 0 13em;
}

我的目標是獲得更多信息文本（div），當我使用 hover 卡時出現； 由於卡片包含來自數據庫的產品，我當然可以在卡片和更多信息中將產品 ID 添加為 class，並以 javascript 的名稱作為目標，但我想知道我是否可以更改 div 的顯示，將其定位為div 的孩子我在盤旋

Answer 1

.card_moreinfo {
    display: none;
}
    
.card_moreinfo:hover + card_moreinfo{
    display: block;
}

來源： 僅使用 CSS，在 hover 上顯示 div <a>

Answer 2

您需要使用：hover 來顯示或隱藏孩子。 例子;

.card_moreinfo{
    display: none;
}
.card:hover .card_moreinfo{
    display:block;
}

Answer 3

.card {
    flex: 0 0 13em;
}

.card:hover {
    /*add your css*/
}