Как поменять цвет при наведении на другой элемент, если тот находится выше элемента на который навожу?

Question

[12Vadim12]

<div>
 <div class="watch__name">Сергей Васильев</div>
<a href="#" class="third-hover" onmouseover="changeItem()" onmouseout="rechangeItem()">Посмотреть справку</a>
</div>
 <div>
 <div class="watch__name">Сергей Васильев</div>
<a href="#" class="third-hover" onmouseover="changeItem()" onmouseout="rechangeItem()">Посмотреть справку</a>
</div>
 <div>
 <div class="watch__name">Сергей Васильев</div>
<a href="#" class="third-hover" onmouseover="changeItem()" onmouseout="rechangeItem()">Посмотреть справку</a>
</div>

const changeColor = document.querySelector('.watch__name')
 function changeItem(){
  changeColor.style.color = '#4338CA';
  }
 function rechangeItem(){
  changeColor.style.color = '#000';
 }

Проблема в том, что при наведении меняется цвет только у первого h4 тега, применяя SelectorAll, тогда у всех одновременно.

Comments

[Константин Б.]

Используйте всплытие событий, а так же погуглите currentTarget vs target

[12Vadim12]

Константин Б., да только сегодня дочитал утром об https://learn.javascript.ru/bubbling-and-capturing

[ProjectSoft]

<div>
 <div class="watch__name">Сергей Васильев</div>
<a href="#" class="third-hover" onmouseover="changeItem(this)" onmouseout="rechangeItem(this)">Посмотреть справку</a>
</div>
 <div>
 <div class="watch__name">Сергей Васильев</div>
<a href="#" class="third-hover" onmouseover="changeItem(this)" onmouseout="rechangeItem(this)">Посмотреть справку</a>
</div>
 <div>
 <div class="watch__name">Сергей Васильев</div>
<a href="#" class="third-hover" onmouseover="changeItem(this)" onmouseout="rechangeItem(this)">Посмотреть справку</a>
</div>

function changeItem(a){
  a.previousElementSibling.style.color = "red";
}
function rechangeItem(a){
  a.previousElementSibling.style.color = "inherit";
}

Если коротко.

[najmubadr]

Почему бы не использовать CSS hover?

Answer 1

[najmubadr]

Сначала ссылку поставить выше чем .watch-name, далее для контейнера установите

display: flex || inline-flex;
flex-direction: row-reverse || column-reverse;

А дальше пишите стили .third-hover:hover + .watch-name {} и меняйте, что хотите

Answer 2

[Noder SS]

1. Добавить pointer-events: none; высшему блоку
2. По наведение на высший блок давать стили нижнему через js