Soy bastante nuevo en CSS y mi objetivo aquí es que cuando paso el mouse sobre la imagen, aparecen dos botones (botón de reproducción y botón de agregar). Sin embargo, el código que tengo ahora, cuando paso el mouse, solo muestra el botón de reproducción. Me preguntaba por qué este es el caso y cómo puedo hacer que aparezcan ambos. Estoy usando React, HTML y CSS para este proyecto.
reaccionar aquí
function MainCard(){ return( <div> <div className="mainCardObject"> <ul> <li> <div className="cardObj"> <img src={HipHopCard} className ="mainCardImage" /> <button className="playbutton">play</button> <button className="addbutton">add</button> </div> </li> <li> <div className="cardObj"> <img src={HouseCard} className = "mainCardImage" /> <button className="playbutton">play</button> <button className="addbutton">add</button> </div> </li> <li> <div className="cardObj"> <img src={PopCard} className = "mainCardImage"/> <button className="playbutton">play</button> <button className="addbutton">add</button> </div> </li> </ul> </div> </div> )}
CSS aquí
.playbutton{ background-color: red; position: absolute; margin-top: 120px; margin-left: 10px; display: none; } .addbutton{ background-color: turquoise; position: absolute; margin-top: 120px; margin-left: 200px; display: none; } img:hover + .playbutton, .playbutton:hover { display: inline-block; color: yellow; } img:hover + .addbutton, .addbutton:hover { display: inline-block; color: yellow; }el '+' en img:hover + .addbutton es el selector de hermanos adyacente, por lo que es mejor usar el selector de hermanos general '~'
puedes usar una de las siguientes maneras
img:hover ~ button { display: inline-block; color: yellow; } img:hover ~ .playbutton, img:hover ~ .playbutton{ display: inline-block; color: yellow; }Su archivo CSS debería convertirse
.playbutton{ background-color: red; position: absolute; margin-top: 120px; margin-left: 10px; display: none; } .addbutton{ background-color: turquoise; position: absolute; margin-top: 120px; margin-left: 200px; display: none; } img:hover ~ .playbutton, img:hover ~ .addbutton { display: inline-block; color: yellow; } /*if you want the on hover button too uncomment this .addButton:hover, .playButton:hover { display: inline-block; color: yellow; } */Aún
Recomendaría la detección del evento de desplazamiento en el padre, de esta manera puede seleccionar a los niños más fácilmente, como
.cardObj:hover > .playbutton, .cardObj:hover > .playbutton{ display: inline-block; color: yellow; }