更新版本：

Question

我正在尝试选择jQuery中除了“this”之外的所有body元素，或者正在徘徊的那个元素。我试图让身体去一定的不透明度，但“这个”要保持它的不透明度。这是我的代码：

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

Answer 2

批量选择可能不会产生你所追求的结果，因为它仍会以你想要保持不透明的元素的孩子和父母为目标 - 在此过程中降低其不透明度。

有几种不同的方法可以解决这个问题。您可以使用半透明背景颜色（ala rgba(255,255,255,0.5)）添加某种“mask”元素（通常是一个空div用于此类事物）。通过更改z-index可以完成覆盖该项掩码的悬停项目，因此所有未悬停的内容都是比掩码div更低的索引，而悬停的东西则更高。

那就是说，你可能想三思而后行。使网站的非悬停部分更难以看到的好处是什么？你能找到另一种方法来突出重点悬停的项目，而不是淡出其他一切吗？当你处理类似这样的问题时，请记住可用性。

选择除一个元素外的所有正文

2 个答案:

更新版本：