將鼠標懸停在父項上時的樣式子元素

Question

如何在父元素上懸停時更改子元素的樣式。如果可能的話，我更喜歡CSS解決方案。是否有任何解決方案可以通過：懸停CSS選擇器。實際上，當面板上懸停時，我需要更改面板內選項欄的顏色。

尋求支持所有主流瀏覽器。

Answer 1

是的，你絕對可以做到這一點。只需使用類似

.parent:hover .child { 
    /* ... */ 
} 

根據this page它支持所有主流瀏覽器。

Answer 2

是的，你可以做到這一點使用下面的代碼它可以幫助你。

.parentDiv{ 
 
margin : 25px; 
 

 
} 
 
.parentDiv span{ 
 
    display : block; 
 
    padding : 10px; 
 
    text-align : center; 
 
    border: 5px solid #000; 
 
    margin : 5px; 
 
} 
 

 
.parentDiv div{ 
 
padding:30px; 
 
border: 10px solid green; 
 
display : inline-block; 
 
align : cente; 
 
} 
 

 
.parentDiv:hover{ 
 
    cursor: pointer; 
 
} 
 

 
.parentDiv:hover .childDiv1{ 
 
border: 10px solid red; 
 
} 
 

 
.parentDiv:hover .childDiv2{ 
 
border: 10px solid yellow; 
 
} 
 
.parentDiv:hover .childDiv3{ 
 
border: 10px solid orange; 
 
}

<div class="parentDiv"> 
 
<span>Hover me to change Child Div colors</span> 
 
    <div class="childDiv1"> 
 
    First Div Child 
 
    </div> 
 
    <div class="childDiv2"> 
 
    Second Div Child 
 
    </div> 
 
    <div class="childDiv3"> 
 
    Third Div Child 
 
    </div> 
 
    <div class="childDiv4"> 
 
    Fourth Div Child 
 
    </div> 
 
</div>