Tengo tres componentes React separados (un botón, una imagen y un párrafo, por ejemplo) y cada uno de ellos tiene su evento de desplazamiento con estilo en su archivo scss separado. Todos los componentes son hermanos . Quiero que cada uno de estos eventos flotantes funcione al pasar el mouse sobre cualquiera de los otros elementos. ¿Es posible por scss o debo hacerlo por React JS? ¿Cómo debo hacer eso?
Puede lograrlo con :hover
css pseudo-class en el elemento principal y especificar el conjunto de reglas con el selector secundario apropiado. Por ejemplo:
div:hover img { /* some styling */ } div:hover p { /* some styling */ } div:hover button { /* some styling */ }
<div> <img /> <p>some paragraph</p> <button>Press me!</button> </div>
Puede leer más sobre :hover
aquí y sobre los selectores css aquí