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

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>

Answer 2

像这样的批量选择可能不会给出您想要的结果，因为它仍然会针对您想要保持不透明的元素的子元素和父元素 - 在此过程中降低其不透明度。

有几种不同的方法可以处理这个问题。您可能会添加某种带有半透明背景颜色的“掩码”元素（通常是一个空的 div 用于这样的事情）（ala rgba(255,255,255,0.5)）。可以通过更改 z-index 来让悬停的项目覆盖该蒙版，因此未悬停的所有内容的索引都低于蒙版 div，而悬停的内容则处于更高的索引。

也就是说，您可能需要三思而后行。使网站的非悬停部分更难看到有什么好处？你能找到另一种方法来突出悬停的项目以强调重点，而不会使其他所有内容淡出吗？在处理此类问题时，请牢记可用性。