Hover child DIV and change style of other parent DIV

Question

I'm trying to make a quite simple CSS hover effect.

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

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

What I woud like to happen, is that when you hover <div class="child"></div> it changes the element style of <div class="nav"></div> I've tried a lot of things like

.child:hover ~ .nav { }

But of course when I do this, it will search for a DIV with the class 'nav' inside the parent DIV '.menu', right?

I also tried

.child:hover .nav {

}

and

.child:hover + .nav {
}

I do feel a little bit stupid for asking this question, because the solution is probably pretty easy, but I have been trying to solve this problem for a few hours now...

Answer 1

using jQuery, you can use .hover() to add css to the nav div like below

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