除了使用jquery徘徊之外,如何淡化整个html体内容？

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体褪色和div not-to-be-fade也同样淡化,但我希望div与类not-to-be-fade不褪色.

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>