如何淡出整个html正文内容（使用jquery悬停的内容除外）？

Question

假设我的html如下：

<div id="content">
   <div class="container">
       <div class="not-to-be-fade">
       </div>   
   </div>
</div>

这是我的js代码：

$('.not-to-be-fade').hover(function(){
    $('#content).not('.not-to-be-fade').fadeTo('slow', 0.5);
})

通过这种方式，所有html主体都淡入淡出，并且类not-to-be-fade的div也淡出，但是我希望类not-to-be-fade的div不褪色。

Answer 1

您可以使用jQuery not-selector； $(":not(.className)")

淡化.container的内容，而不是淡化实际的.container。

尝试下面的代码段。

$('.not-to-be-fade').hover(function() {
  $('.container div:not(.not-to-be-fade)').fadeTo('slow', 0.5);
}, function() {
  $('.container div:not(.not-to-be-fade)').fadeTo('slow', 1);
});

.not-to-be-fade {
  background-color: red !important;
}

.container div {
  height: 30px;
  width: 100%;
  border: 1px solid black;
  margin-top: 10px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div class="container">
    <div></div>
    <div class="not-to-be-fade">
    </div>
    <div></div>
    <div></div>
  </div>
</div>

Answer 2

如果目标元素具有绝对位置或固定位置，则此代码不起作用。有时间我会完成。

这里发生的是，我创建了1个包装div和4个附加div，这4个div具有背景颜色rgba(255, 255, 255, 0.5)，经过一些计算，这就是结果Jsfiddle

$('.not-to-be-fade').mouseenter(function(){
    var width = this.offsetWidth;
    var height = this.offsetHeight;
    
    var maj = document.createElement('div');
    
    var top = $(this).offset().top;
    var left = $(this).offset().left;
    var bottom = document.documentElement.clientHeight - (top + this.offsetHeight);
    var right = document.documentElement.clientWidth - (left + this.offsetWidth);
    
    for(let i=0; i<4; i++){
       var div = document.createElement('div');
       div.id = "absolute-"+i;
       maj.append(div);
       if(i==0){
         div.style.height = top+"px";
       }
       if(i==1){
         div.style.height = bottom+"px";
       }
       if(i==2){
         div.style.width = left+"px";
         div.style.height = this.offsetHeight+"px";
         div.style.top = top+"px";
       }
       if(i==3){
         div.style.width = right+"px";
         div.style.height = this.offsetHeight+"px";
         div.style.top = top+"px";
       }
    }
    $(maj).insertAfter($(this))
    maj.append(this);

    this.style.width = width+"px";
    this.style.height = height+"px";
});

$('.not-to-be-fade').mouseleave(function(){
    $( this.parentElement ).replaceWith( this );
    $(this).removeAttr("style");
});

#content {
  background: #ffccaa;
  width: 400px;
  height: 400px;
}

.container {
  background: #ee9900;
  width: 200px;
  height: 200px;
  display: flex; 
  flex-wrap: wrap;
}
@keyframes fade{
  0%{
    background-color: rgba(255, 255, 255, 0);
  }
  100%{
    background-color: rgba(255, 255, 255, 0.5);
  }
}
.not-to-be-fade {
  background: #202020;
  width: 100px;
  height: 100px;
  text-align: center;
  color: #ccc;
}
.fade{
  width: 50px;
  height: 50px;
}
.long{
  width: 200px;
}

/*Inmportant styling */
#absolute-0{
  position: fixed;
  top: 0;
  left: 0;
  width: 200vw;
  background-color: rgba(255, 255, 255, 0.5);
  animation: fade 0.5s linear;
}
#absolute-1{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 200vw;
  background-color: rgba(255, 255, 255, 0.5);
  animation: fade 0.5s linear;
}
#absolute-2{
  position: fixed;
  left: 0;
  height: 200vh;
  background-color: rgba(255, 255, 255, 0.5);
  animation: fade 0.5s linear;
}
#absolute-3{
  position: fixed;
  right: 0;
  height: 200vh;
  background-color: rgba(255, 255, 255, 0.5);
  animation: fade 0.5s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
   <div class="container">
       <div class="fade long">
       </div>
       <div class="fade">
       </div>
       <div class="fade">
       </div>
       <div class="not-to-be-fade">
       Hover Here
       </div>
       <div class="fade">
       </div>
       <div class="fade">
       </div>
   </div>
</div>