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

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更低的索引，并且徘徊的东西是更高的。

这就是说，你可能想对此再三考虑。难以看到网站的非悬停部分有什么好处？你能找到另一种突出强调悬停物品的方式，而不会淡化其他所有物品吗？当你处理这样的问题时，请记住可用性。