Hovering on parent div not working as desired in Reactjs

Question

Front-end code:

                return (
                    <div className="card" key={i} >
                        <img src={anime["main_picture"]["medium"]} alt="Anime" className="cardImage"></img>
                        <div className="cardTitle">
                            <p>{anime["title"]}</p>
                        </div>
                    </div>
                );
            })}

CSS:

.card{
    height: 10vmin;
    flex-direction: row;
    display: flex;
    border-top : 1px solid #000;
    border-bottom : 1px solid #000;
    align-items: center;
}

.card :hover{
    background-color: #E3E3E3;
}

when Hovering over the card div, it changes the background color of its child items instead of the whole div. Any ideas as to what's wrong? Thank you

score 0 · Accepted Answer · answered Apr 05 '21 at 18:37

0

There is a space between your selector and hover. It Should be .card:hover.

answered Apr 05 '21 at 18:37

Jaspero

2,912
6
26
30

Thank you so much! I didn't know a space in CSS could change the selection – Dijkstrahul Apr 05 '21 at 18:55
No problem! Yes, the space selects nodes that are descendent of the first element. – Jaspero Apr 05 '21 at 18:58

Hovering on parent div not working as desired in Reactjs

1 Answers1