Как я могу начать переход для элемента b, когда элемент a зависает?

Question

У меня есть два элемента. Когда я навис над одним из них (img), я хочу, чтобы он начал переход на другой элемент на странице. Я 99.999% уверен, что я делал это раньше, но я не могу вспомнить, как, и никакое количество поисков не дало мне никаких намеков.

Как я могу начать переход к элементу б когда элемент в наведен?

Answer 1

Вы можете использовать селектор для брака +.

Целевой элемент a для :hover псевдокласс и выберите элемент родственного брата b. Используйте свойство transition на элементе b.

.a:hover + .b { 
 
    background: #8AACFF; 
 
} 
 
.b { 
 
    background: lightblue; 
 
    transition: all ease 1s; 
 
}

<div class="a">Hover over me</div> 
 
<div class="b">My background will change</div>

Answer 2

Вы можете сделать это в CSS, если второй элемент является родным братом первого.

Возьмем для примера следующую разметку:

<img src="…" class="hover-trigger"> 
<section class="hover-target"> 

и это CSS:

.hover-target { 
    opacity: 0; 
    transition: opacity 200ms linear; 
} 

.hover-trigger:hover + .hover-target { 
    opacity: 1; 
} 

При наведении курсора на img.hover-trigger переход на .hover-target будет получить срабатывает.