Is there a way to get two sibling elements to affect each other?

user_12081902 0
Viewed 44

Say I have two elements, "A" and "B"... when you hover on A, I want B to change colour, and when you hover on B, I want A to change colour...

<ul>
    <li>A</li>
    <li>B</li>
</ul>

I've found the usual sibling selectors, like (~) and (+), but they'd only allow A to affect B. I could make ul { display: flex; } and swap A and B, but that would only allow B to affect A.

Everything in the website I'm making is working, I just wanna make a sort of "paired link" system... basically, two links that, if either are hovered over, both act like they were hovered over...

I've tried (-) just to see if it'd work, but it didn't... I've tried hovering over the parent with (>), but that just made all the links act like they were being hovered over (I figured as much, but I still had to try)... To be honest, I haven't done html and css in forever, so I'm not sure what I'm missing...

css-selectors css
1 Answers

You can achieve something similar by highlighting all list items of the hovered <ul>, and resetting the style of the hovered list item:

ul {
  padding: 0;
  list-style: none;
}

ul:hover > .item {
  color: red;
}

li.item:hover {
  color: initial;
}
<ul>
  <li class="item">A</li>
  <li class="item">B</li>
</ul>

user_51574540
Related