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

Posted 2023-03-07

【中文标题】将除一个元素之外的所有元素设置为暗色背景

【英文标题】：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 并更好地分离职责，但可能没有办法做到这一点。前端开发没什么新意，所以我不知道做这件事的最佳方法；谢谢！！

【参考方案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/