選擇除一個元素外的所有主體

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

這就是說，你可能想對此再三考慮。難以看到網站的非懸停部分有什麼好處？你能找到另一種突出強調懸停物品的方式，而不會淡化其他所有物品嗎？當你處理這樣的問題時，請記住可用性。