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 { }

但是当我这样做的时候，它会用类＆＃39; nav＆＃39;来搜索DIV。在父DIV＆＃39; .menu＆＃39;内，对吧？

我也试过

.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添加到nav div，如下所示

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

悬停儿童DIV并改变其他父DIV的风格

2 个答案: