Style all but one element to dim background

问题

Looking to achieve a dimmed-background effect by dimming (or changing the opacity of) all elements on the page but one; I've been trying out :not() as well as some jQuery selectors to try and exclude all but the element, but to no avail. Does anyone know of the best way to do this with SASS/Compass or, failing that, jQuery?

So far, I've tried things like:

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

or

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

Ideally, I'd like to avoid having to write more JS and better separate responsibilities,but there might not be a way to do that. Little new to Front-End development, so I'm not aware of a best way to go about doing this; thanks!!

回答1:

You can achieve this by placing a blanket over all elements, and then pulling the element you want to display out of the DOM order with the z-index property

.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;
}

Note that the element needs to have a non static position.

See http://jsfiddle.net/cyberdash/fCMaT/

回答2:

you could add another class to the non-dimmed/active div. I'll put together a fiddle.

http://jsfiddle.net/nqT7V/

In 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");
    }
});

来源：https://stackoverflow.com/questions/24706934/style-all-but-one-element-to-dim-background