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í