CSS懸停另一個元素

Question

當我將鼠標懸停在.categories類上時，我想要定位.drop類，可以只用css來做到這一點？

Answer 1

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    float:left; 
 
    margin: 10px; 
 
    border: 1px solid #333; 
 
} 
 
.categories:hover ~ .drop { 
 
    background-color: red; 
 
}

<div class="categories">categories</div> 
 
<div class="drop">drop</div>

恐怕你無法定位到要由DOM相對於懸停的元素只能用CSS的元素。你可以像這樣使用jQuery實現這一目標：

$('.categories').hover(function() { 
    $('.drop').css({ // your code }) 
}); 

如果HTML是這樣的檢查片斷：

<div class="categories"></div> 
<div class="drop"></div> 

你可以這樣做：

.categories:hover ~ .drop { 
    /* css rules */ 
}