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/

Answer 2

你可以在非灰色/活动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 个答案: