在没有 javascript 的 hover 上显示/隐藏 div 子项

Question

i have a bunch of repeating cards:

<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>

the container style is something like:

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

the card style is something like:

.card {
    flex: 0 0 13em;
}

my goal is to have the more info text (div), appear when i hover the card; since the cards contain a product coming from the database i can surely add the product id as class both in card and in moreinfo and target it by name with a javascript, but im wondering if i can change the display of the div, targeting it as the child of the div im hovering

Answer 1

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

source: Using only CSS, show div on hover over <a>

Answer 2

You need to use the:hover for displaying or hiding the child. Example;

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

Answer 3

.card {
    flex: 0 0 13em;
}

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