选择除一个元素之外的所有主体

Question

我试图在 jQuery 中选择除“this”或悬停在上面的元素之外的所有正文元素。我试图让身体达到一定的不透明度，但是“这个”是为了保持它的不透明度。这是我的代码：

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

尝试以下操作，使用 CSS 处理悬停设置新的高度，当不悬停时，高度将恢复到之前的高度。

此外，通过悬停和回调（未悬停），您可以将所有其他设置为opacity: "0.4"悬停，并在鼠标移出时重置所有（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>

更新后的版本：

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