Hover on 1 child - hide other parents which are inside other divs - Jquery

Question

When I hover 1 child, I try to hide other parents div ( child including ) except the child hovered and its parent.

<div class="wrap">
    <div class="parent">
        <div class="child"></div>
    </div>
    <div class="parent">
        <div class="child"></div>
    </div>
    <div class="parent">
        <div class="child"></div>
    </div>
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

I found this very similar, but reversed, and can't find a way to make it work.

Hover on 1 child - hide other children which are inside other divs, css only

$('.dep').hover(function() {
  $(this).parent().children().not(this).find('.dim').css({'opacity' : '1'})
}, function() {
  $('.dim').css({'opacity' : '0'})
})

Answer 1

What you want to do is once you've found the .parent(), simply hide the .siblings() by setting their opacity to 0. You'll also want to show the one you're hovering over by setting the opacity to 1, as can be seen in the following:

$('.child').hover(function() {
  $(this).parent().siblings().css({
    'opacity': '0'
  })
}, function() {
  $('.parent').css({
    'opacity': '1'
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrap">
    <div class="parent">
        <div class="child">Child 1</div>
    </div>
    <div class="parent">
        <div class="child">Child 2</div>
    </div>
    <div class="parent">
        <div class="child">Child 3</div>
    </div>
    <div class="parent">
        <div class="child">Child 4</div>
    </div>
</div>