Estoy usando React y quiero resolver el problema con la solución React.
Necesito pasar el mouse para apuntar al siguiente elemento.
Todo el código está aquí: https://codesandbox.io/s/react-list-sample-map-with-keys-forked-35zubq?file=/src/styles.css:59-210
Lo que necesito ejemplo:
si se desplaza sobre el elemento con el número 3, quiero eliminar el borde superior del elemento 4 si se desplaza sobre el elemento con el número 4, quiero eliminar el borde superior del elemento 5
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map(number => ( <li key={number.toString()}>{number}</li> )); export default function App() { return <ul>{listItems}</ul>; } ul li { margin: 10px; background: yellowgreen; border-top: 5px solid red; height: 50px; } ul li:hover { border-top: 5px solid transparent; }No tengo idea de cómo hacerlo.
Busqué en Google y cada solución es una solución en jQuery
Debería poder manejar eso con el combinador de adjacent sibling :
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map(number => ( <li key={number.toString()}>{number}</li> )); export default function App() { return <ul>{listItems}</ul>; } ul li { margin: 10px; background: yellowgreen; border-top: 5px solid red; height: 50px; } ul li:hover + li { border-top: 5px solid transparent; } li:hover + li seleccionará el hermano adyacente al que está desplazando. Si pasa el cursor sobre <li>3</li> , ul li:hover + li seleccionará <li>4</li> y así sucesivamente.