I am using React and i want to solve problem with React solution.
I need on hover to target next element.
All code is here: https://codesandbox.io/s/react-list-sample-map-with-keys-forked-35zubq?file=/src/styles.css:59-210
What I need example:
if you hover on element with number 3 i want to remove border-top from element 4 if you hover on element with number 4 i want to remove border-top from element 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;
}
I don't have a idea how to do it.
I googled and every solution is a solution in jQuery
You should be able to handle that with the adjacent sibling combinator:
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 will select the adjacent sibling to the one you're hovering. If you hover over <li>3</li>, ul li:hover + li will select <li>4</li> and so on.