Cambiare l'opacità di tutti gli elementi tranne uno Div

Question

Sto provando a svanire tutti gli elementi su una pagina Web ad eccezione di un div. Sono stato in grado di svanire tutti gli elementi con il seguente jQuery:

$('*').css('opacity', .3); 

Tuttavia, sembra come se l'opacità è una proprietà che eredita da elementi padre, anche se ho impostato in modo esplicito l'opacità del div a 1 . Sto disegnando un vuoto per qualsiasi soluzione in questo momento, quindi posso avere qualche aiuto qui?

Answer 1

Se ciò che si desidera è far apparire visivamente questo particolare div, si potrebbe considerare un approccio simile a quello utilizzato per le finestre modali/lightbox. Posiziona il div assolutamente con un alto indice z, quindi impila un altro div tra quello evidenziato e il resto del contenuto con un colore di sfondo scuro e opacità media. Ciò in effetti "oscura" il resto della pagina mantenendo il div evidenziato con la sua normale apparenza.

Answer 2

Forse invece di fare il selettore * è possibile renderlo più mirato a div o whatnot e quindi utilizzare il selettore not per ignorare quello che si desidera mantenere normale?

C'è anche questo articolo su CSS Opacity che non influisce sui bambini che potrebbero essere utili.

Answer 3

L'opacità è infatti ereditata. Se ci pensate, non ha molto senso che un div trasparente contenga comunque una div non trasparente.

Quello che probabilmente si desidera invece è impostare il colore di sfondo di un div su trasparente. Per fare ciò, devi usare i colori rgba ma tieni presente che questo è supportato in meno browser.

È possibile leggere un confronto tra i due inclusi i relativi effetti e implementazioni, here.

Ulteriori informazioni sarebbero utili. Se il div in questione è sufficientemente separato dal resto del contenuto in modo tale che, occasionalmente, desideri mostrarlo separatamente da tutto il resto, potresti voler considerare la ristrutturazione della pagina in modo che non sia contenuta nel div padre.

Answer 4

Come suggerito da Jimmy Cuadra, è possibile modificare la posizione del div, quindi aggiungere una sovrapposizione sotto di esso ... Ciò è simile a ciò che fa jQuery Tools Expose.

Non hai davvero bisogno di un plugin per farlo, ho risposto ad un'altra domanda con un approccio simile. Questo script rimuoverà l'overlay se fai clic ovunque al di fuori del div evidenziato. Nota questo richiede l'uso di jQuery versione 1.4+

// Relatively position the div to highlight 
$('#myDiv').css({ 
    position: 'relative', 
    top  : 0, 
    left : 0, 
    zIndex : 100 
}); 

// Add overlay and make clickable 
var w = $(window).width(); 
var h = $(window).height(); 
var $overlay = $('<div/>', { 
    'id': 'overlay', 
    css: { 
    position : 'absolute', 
    height  : h + 'px', 
    width  : w + 'px', 
    left  : 0, 
    top  : 0, 
    background : '#000', 
    opacity : 0.5, 
    zIndex  : 99 
    } 
}).appendTo('body'); 
// Click overlay to remove 
$('#overlay').click(function(){ 
    $(this).remove(); 
}) 

Answer 5

Una tecnica interessante consiste nell'applicare un grande contorno al div. Funziona anche con un box-shadow di grandi dimensioni. Le differenze sono dettagliate here.

Definire una classe CSS, come highlight, con quella proprietà:

.highlight { 
    outline: 9999px solid rgba(0,0,0,0.5); 
} 

in javascript, si può solo applicare tale classe al div:

$('#mydiv').addClass('highlight');