Select all body except one element

Question

I'm trying to select all the body's elements in jQuery except "this", or the one being hovered on. I'm trying to get the body to go to a certain opacity, but "this" to maintain its opacity. This is my code:

$(".content img").mouseenter(function() {
    $(this).animate({
        opacity: "1",
    });

    $("body").find('*').not($(this)).animate({
        opacity: "0.4",
    });
});  







    <div class="content">
            <div class="row">
                <div class="col-md-2">
                    <h4>Handbags</h4>
                    <img src="FullSizeRender (1).jpg" />
                </div>

                <div class="col-md-2">
                    <h4>Beach bags</h4>
                    <img src="FullSizeRender (2).jpg" />
                </div>

                <div class="col-md-2">
                    <h4>Purses</h4>
                    <img src="IMG_5213.JPG" />
                </div>

                <div class="col-md-2">
                    <h4>Bottle carriers</h4>
                    <img src="FullSizeRender (5).jpg" />
                </div>

                <div class="col-md-2">
                    <h4>Baskets</h4>
                    <img src="img1.jpg" />
                </div>
            </div>


            <div class="row">
                <div class="col-md-2">
                    <h4>Vases</h4>
                    <img src="img2.jpg" />
                </div>

                <div class="col-md-2">
                    <h4>Placemats</h4>
                    <img src="img6.jpg" />
                </div>

                <div class="col-md-2">
                    <h4>Coasters</h4>
                    <img src="IMG_4665.JPG" />
                </div>

                <div class="col-md-2">
                    <div class="tiss">
                        <h4>Tissue box covers</h4>
                        <img src="img3.jpg" />
                    </div>
                </div>

                <div class="col-md-2">
                    <div class="ornament">
                        <h4>Holiday ornaments</h4>
                        <img src="img4.jpg" />
                    </div>
                </div>
            </div>
    </div>

Answer 1

Try the following, use CSS to handle hover set new height, when not hovered the height will back to whatever you have before.

Also with hover and callback(not hovered), you can set all other to opacity: "0.4" on hover, and reset all when mouse move out (opacity: "1")

$(".content").hover(function() {
  $(this).css("cursor", "pointer");
  $("body").find("*").not(this).animate({
    opacity: "0.4"
  }, 1000);
}, function() {
  $("body").find("*").stop().animate({
    opacity: "1"
  }, 0);
});

div {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: green;
}

.heigher {
  height: 100px;
}

.content:hover {
  height: 200px;
  -webkit-transition: height 1s linear;   
  -moz-transition: height 1s linear;   
  -ms-transition: height 1s linear;   
  -o-transition: height 1s linear;   
  transition: height 1s linear; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">content 1</div>
<div class="content">content 2</div>
<div class="content">content 3</div>
<div class="content heigher">content 4</div>
<div class="content">content 5</div>
<div class="content heigher">content 6</div>

UPDATED Version:

$(".content img").mouseenter(function() {
  $(this).parent().animate({
    opacity: "1",
  });

  $(".content").find('img').not($(this)).parent().animate({
    opacity: "0.4",
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="content">
  <div class="row">
    <div class="col-md-2">
      <h4>Handbags</h4>
      <img src="FullSizeRender (1).jpg" />
    </div>

    <div class="col-md-2">
      <h4>Beach bags</h4>
      <img src="FullSizeRender (2).jpg" />
    </div>

    <div class="col-md-2">
      <h4>Purses</h4>
      <img src="IMG_5213.JPG" />
    </div>

    <div class="col-md-2">
      <h4>Bottle carriers</h4>
      <img src="FullSizeRender (5).jpg" />
    </div>

    <div class="col-md-2">
      <h4>Baskets</h4>
      <img src="img1.jpg" />
    </div>
  </div>


  <div class="row">
    <div class="col-md-2">
      <h4>Vases</h4>
      <img src="img2.jpg" />
    </div>

    <div class="col-md-2">
      <h4>Placemats</h4>
      <img src="img6.jpg" />
    </div>

    <div class="col-md-2">
      <h4>Coasters</h4>
      <img src="IMG_4665.JPG" />
    </div>

    <div class="col-md-2">
      <div class="tiss">
        <h4>Tissue box covers</h4>
        <img src="img3.jpg" />
      </div>
    </div>

    <div class="col-md-2">
      <div class="ornament">
        <h4>Holiday ornaments</h4>
        <img src="img4.jpg" />
      </div>
    </div>
  </div>
</div>