将除一个元素之外的所有元素设置为暗色背景答案

【问题标题】：Style all but one element to dim background将除一个元素之外的所有元素设置为暗色背景
【发布时间】：2014-09-02 14:56:11
【问题描述】：

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

到目前为止，我已经尝试过：

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

或

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

理想情况下，我希望避免编写更多的 JS 并更好地分离职责，但可能没有办法做到这一点。前端开发没什么新意，所以我不知道做这件事的最佳方法；谢谢！！

【问题讨论】：

标签： javascript jquery css sass compass-sass

【解决方案1】：

您可以向非暗淡/活动 div 添加另一个类。我会整理一个小提琴。

http://jsfiddle.net/nqT7V/

在 Jquery 中：

$(".item").click(function(){
    var $this = $(this);
    $this.parent().addClass("dimmed");
    $this.parent().find(".item").removeClass("active");
    $this.addClass("active");
});

$(".holder").click(function(e){
    if (e.target != this) return;
    var $this = $(this);
    if ($this.hasClass("dimmed")){
        $this
            .removeClass("dimmed")
            .find(".item").removeClass("active");
    }
});

【讨论】：

【解决方案2】：

您可以通过在所有元素上放置一个毯子来实现此目的，然后使用 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/

【讨论】：