如何在元素a懸停時開始元素b的轉換？

Question

我有兩個元素。當我將鼠標懸停在其中一個（img）上時，我希望它在上啓動頁面上不同元素上的轉換。我99.999％肯定我以前做過這件事，但我不記得如何，也沒有多少搜索給我任何提示。

如何元素b當元素a徘徊？

Answer 1

您可以使用+兄弟選擇器。

目標元素a爲:hover僞類，並選擇兄弟元素b。使用目標元素b上的transition屬性。

.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的過渡將被觸發。