懸停子DIV並改變其他父DIV的樣式

Question

我試圖做一個很簡單的CSS懸停效果。

<div class="menu"> 
    <div class="child"></div> 
</div> 

<div class="nav"> 
    <div class="item1"></div> 
</div> 

我woud發生這樣的，就是當你將鼠標懸停<div class="child"></div>它改變了<div class="nav"></div>元素的風格我已經嘗試了很多東西像

.child:hover ~ .nav { } 

但是，當然，當我這樣做，它會在父DIV'.menu'中搜索帶有類「nav」的DIV，對吧？

我也試過

.child:hover .nav { 

}

和

.child:hover + .nav { 
} 

我確實覺得有點傻問這個問題，因爲該解決方案可能是很容易的，但我有一直試圖解決這個問題現在幾個小時...

Answer 1

使用jQuery，您可以使用.hover()將CSS添加到像下面的導航div

$(document).ready(function() { 
 
    $('.child').hover(function() { 
 
    $('.nav').toggleClass('myStyle'); 
 
    }); 
 
});

.myStyle { 
 
    background-color: lightgray; 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
    Menu Element 
 
    <div class="child">Child Element</div> 
 
</div> 
 

 
<div class="nav"> 
 
    Nav Element 
 
    <div class="item1">Item 1</div> 
 
</div>

Answer 2

不幸的是，喲你無法控制使用純CSS的父元素。

jQuery是你最好的選擇在這裏，如：

$('.child').hover(function() { 
    $(this).parent().addClass('someClassForParentStyling'); 
}, function() { 
    $(this).parent().removeClass('someClassForParentStyling'); 
}); 

在你的CSS，有你想要的設置，如父元素的樣式：

.someClassForParentStyling { 
    background: #efefef; 
}