javascript - 将除一个元素之外的所有元素都设置为暗淡的背景

Question

希望通过调暗(或改变不透明度)页面上除一个元素之外的所有元素来实现暗淡背景效果；我一直在尝试 :not() 以及一些 jQuery 选择器来尝试排除元素以外的所有内容，但无济于事。有谁知道使用 SASS/Compass 或 jQuery 执行此操作的最佳方法？

到目前为止，我已经尝试过类似的事情:

.opacityFade:not(.classToExclude) {
   STYLES HERE
 }

或

   $('controlElement').click(function(){
     $(body).not('desiredTargetToExclude').toggleClass('classThatFadesStuffOut');
});

理想情况下，我想避免编写更多的 JS 和更好地分离职责，但可能没有办法做到这一点。前端开发的新手，所以我不知道这样做的最佳方法；谢谢!!

Answer 1

您可以通过在所有元素上放置一个毯子来实现这一点，然后使用 z-index 属性将您想要显示的元素从 DOM 顺序中拉出

.item {
    background: #f00;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 10px;
}

.item.selected {
    position: relative;
    z-index: 200
}

.blanket {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
    z-index: 100;
}

请注意，该元素需要有一个非静态位置。

参见 http://jsfiddle.net/cyberdash/fCMaT/