悬停子项 DIV 并更改其他父项的样式 DIV

Question

我正在尝试制作一个非常简单的 CSS 悬停效果。

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

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

我希望发生的事情是，当您将鼠标悬停在 <div class="child"></div> 上时，它会更改 <div class="nav"></div> 的元素样式我已经尝试了很多方法，例如

.child:hover ~ .nav { }

当然，当我这样做时，它会在父 DIV '.menu' 中搜索带有 class 'nav' 的 DIV，对吗？

我也试过了

.child:hover .nav {

}

和

.child:hover + .nav {
}

我确实觉得问这个问题有点愚蠢，因为解决方案可能很简单，但我已经尝试解决这个问题几个小时了...

Answer 1

遗憾的是，您无法使用纯 CSS 来控制父元素。

jQuery 是您最好的选择，例如：

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

在您的 CSS 中，为父元素设置您想要的样式：

.someClassForParentStyling {
  background: #efefef;
}

Answer 2

使用 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>

悬停子项 DIV 并更改其他父项的样式 DIV

Hover child DIV and change style of other parent DIV

html

hover

parent