Change element when hover on different element

Question

<section id="section_line">
  <div id="line_div1">
    <article class="line_clanek" id="line_clanek1">
      <h3>Season 1</h3>
      <p>Release date:<br> 2.Prosince 2013 - 14.Dubna 2014</p>
    </article>
    <article class="line_clanek" id="line_clanek2">
      <h3>Season 3</h3>
      <p>Release date:<br> 1.Dubna 2017 - 1.Října 2017</p>
    </article>
    <article class="line_clanek" id="line_clanek3">
      <h3>Season 5</h3>
      <p>Release date:<br> 20.Června 2021 - 5.Září 2021</p>
    </article>
  </div>
  <div id="line">
    <div class="line_dot" id="line_dot1"></div>
    <div class="line_dot" id="line_dot2"></div>
    <div class="line_dot" id="line_dot3"></div>
    <div class="line_dot" id="line_dot4"></div>
    <div class="line_dot" id="line_dot5"></div>
    <div class="line_dot" id="line_dot6"></div>
  </div>
  <div id="line_div2">
    <article class="line_clanek" id="line_clanek4">
      <h3>Season 2</h3>
      <p>Release date:<br> 26. července 2015 - 4. října 2015</p>
    </article>
    <article class="line_clanek" id="line_clanek5">
      <h3>Season 4</h3>
      <p>Release date:<br> 10. listopadu 2019 - 31. května 2020</p>
    </article>
    <article class="line_clanek" id="line_clanek6">
      <h3>Season 6</h3>
      <p>Release date:<br> 4. září 2022 - 11. prosince 2022</p>
    </article>
  </div>
</section>

I want to, when I hover on article #line_clanek1, to change the background-color of #line_dot1 to red. I tried lot of things but nothing worked.

I tried using +, ~ and > but nothing worked. I tried ChatGPT but no help for me from GPT. Can I do this just by using CSS or I need to use JavaScript?

You marked this as CSS but there is no CSS here. Can you use JavaScript here? — Mark Schultheiss, Jun 02 '23 at 20:35
THIS is a duplicate here as you have it now https://stackoverflow.com/q/62310227/125981 — Mark Schultheiss, Jun 02 '23 at 21:11

score -1 · Answer 1 · answered Jun 02 '23 at 21:07

I think you could use the CSS selector :has() this way :

#line_div1:has(#line_clanek1:hover) ~ .line > #line_dot1 {
    /* ... */
}

But be advised its browser support is still poor. You would most likely want to achieve this with JavaScript if you can as it will lead to better results with cleaner code.

Change element when hover on different element

1 Answers1