CSS style on :hover to another element

Question

How when I hover on the <li>I can select my <a>element ?

a ul:hover {
  color: red;
}

<a href="#">Link</a>
<ul>
  <li>Element 1</li>
  <li>Element 2</li>
</ul>

score 1 · Answer 1 · answered Apr 19 '23 at 18:32

1

You can do this using :has like this:

a:has(+ ul:hover) {
  color: red;
}

<a href="#">Link</a>
<ul>
  <li>Element 1</li>
  <li>Element 2</li>
</ul>

answered Apr 19 '23 at 18:32

j08691

score 0 · Answer 2 · answered Apr 19 '23 at 18:32

For those browsers which support :has you can use:

<style>
  a:has(+ ul li:hover) {
    background: red;
  }
</style>
<a href="#">Link</a>
<ul>
  <li>Element 1</li>
  <li>Element 2</li>
</ul>

However, check on caniuse.com that there is enough support for your use case - Edge/Chrome/Safari support it but Firefox requires a flag to be set.

2 Answers2