CODEWITHSUNDEEP
htmlhoverparent
FrK
FrK

Reputation: 89

Hover child DIV and change style of other parent DIV

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

Upvotes: 0

Views: 1588

Answers (2)

indubitablee
indubitablee

Reputation: 8206

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>

Upvotes: 1

erier
erier

Reputation: 1744

Unfortunately, you cannot control a parent element using pure CSS.

jQuery is your best bet here, like:

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

In your CSS, have the styling you want for the parent element set like:

.someClassForParentStyling {
  background: #efefef;
}

Upvotes: 1

Related Questions