Как через hover обратиться не к соседнему и не родителю, а к вообще другому элементу

Question

Как при такой вложенности при наводе на h2 c классом title изменять img? просто через .title:hover .img или .title:hover~.img не работает

<div>
  <div>
    <h2 class="title"> </h2>
    <p class="text"> </p>
    <p class="text"> </p>
    <p class="text"> </p>
    <p class="text"> </p>
  </div>
  <div>
    <img class="img">
  </div>
</div>

Answer 1

Как вариант можно сделать так: для каждого h2 с помощью parentNode дойти до общего родителя, а затем в этом родителе отыскать парный img:

var h2s = window.document.querySelectorAll(".title");
h2s.forEach(function(h2) {

  h2.addEventListener("mouseenter", function(event) {
    var img = this.parentNode.parentNode.querySelector(".img");
    if (img) {
      img.classList.add("active");
    }    
  });

  h2.addEventListener("mouseleave", function(event) {
    var img = this.parentNode.parentNode.querySelector(".img");
    if (img) {
      img.classList.remove("active");
    }    
  });
  
});

.img.active {
  opacity: 0.5;
}

<div>
  <div>
    <h2 class="title">Hover Me</h2>
    <p class="text">1</p>
    <p class="text">2</p>
  </div>
  <div>
    <img src="https://picsum.photos/600/400" class="img">
  </div>
</div>

БЛОГ НА HUSL

Как через hover обратиться не к соседнему и не родителю, а к вообще другому элементу

Ответы (1 шт):