Estoy trabajando en un sitio web y encontré un error con mi css. Quiero que se muestre un div cuando se enfoca otro div. ¿Por qué no funciona? Aquí está mi código:

 .explore-card-hidden-info { display: none; } .explore-card-light:focus .explore-card-hidden-info, .explore-card-hidden-info:hover { display: block; }

 <div> <div className="explore-card-light web-box-hor" style={props.style}> <div> <img src={props.src} alt="imgex" style={{width: "100%", margin: 'auto', height: 'auto'}}></img> </div> <div style={{marginLeft: '20px'}}> <p className="card-title" style={{textAlign: 'left'}}>{props.title}</p> <p className="card-main-text">{props.main}</p> <p className="card-footer-text">{props.ex}</p> </div> <div style={{marginLeft: '20px'}}> <p className="explore-card-footer-text" style={{margin: 'none'}}>rates: {props.rate}</p> <p className="explore-card-footer-text" style={{margin: 'none'}}>views: {props.views}</p> <p className="explore-card-footer-text" style={{margin: 'none'}}>purchases: {props.buys}</p> </div> <div style={{ padding: '30px 150px' }}> <p className="card-title">{props.money}</p> <OpBtnOutlineRound text="Buy"></OpBtnOutlineRound> </div> </div> <div className="explore-card-hidden-info"> <h2> I adm hidden! </h2> </div> </div>

 .explore-card-light { background-color: var(--card-bg-light); border-radius: 0px 7px 7px 0px; padding: 25px; width: 95%; margin: 20px; border-left: 10px solid var(--second); position: relative; right: 0px; transition: all 0.4s ease; align-items: center; justify-content: space-between; } .explore-card-hidden-info { display: none; }

Conseguí que funcionara con el foco en otra cosa en el sitio web, ¡pero no quiere trabajar en este!