Show/hide a div child on hover without javascript

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

_“targeting it as the child of the div im hovering”_ - you know how to select a child (or descendant) in CSS? You know how the `:hover` pseudo class works? If so, then what are you still missing? — CBroe, Jun 25 '20 at 10:20

score 0 · Answer 1 · answered Jun 25 '20 at 10:34

0

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

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

answered Jun 25 '20 at 10:34

Krishan Kumar

394
4
13

score -1 · Accepted Answer · answered Jun 25 '20 at 10:26

-1

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

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

answered Jun 25 '20 at 10:26

Kenny.k

106
9

score -1 · Answer 3 · answered Jun 25 '20 at 10:29

-1

.card {
    flex: 0 0 13em;
}

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

answered Jun 25 '20 at 10:29

Ayomi Gunasekara

61
3

5

While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation. – ysf Jun 25 '20 at 11:49
Please don't flag bad answers as low quality. [See this Meta](https://meta.stackoverflow.com/questions/287563/youre-doing-it-wrong-a-plea-for-sanity-in-the-low-quality-posts-queue) – Machavity Jun 25 '20 at 22:45

Show/hide a div child on hover without javascript

3 Answers3