Cambiando la opacidad de todos los elementos excepto una Div

Question

Estoy tratando de atenuar todos los elementos en una página web a excepción de un div. He sido capaz de desaparecer todos los elementos con el siguiente jQuery:

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

Sin embargo, parece como si la opacidad es una propiedad que hereda de elementos padre, aunque lo establece explícitamente la opacidad de la div a 1 . Me estoy quedando en blanco en cuanto a cualquier solución en este momento, entonces ¿puedo tener algo de ayuda aquí?

Answer 1

Si lo que desea es hacer de este div particular, se destacan visualmente, usted podría considerar un enfoque como el que se utiliza para modales ventanas/Mesas de luz. Coloque el div absolutamente con un alto índice z, y luego apilar otra div entre el resaltado y el resto del contenido con un color de fondo oscuro y la opacidad media. Eso en efecto "atenuará" el resto de la página sin dejar de mantener el div resaltado con su apariencia normal.

Answer 2

Tal vez en lugar de hacer el selector *, puede hacerlo más orientado a divs o lo que sea, y luego utilizar el selector not para ignorar el que desea mantener normal?

También hay este artículo en CSS Opacity que no afecta a los niños que podrían ser útiles.

Answer 3

Opacidad es de hecho heredada. Si lo piensas, no tiene mucho sentido que un div transparente contenga un div no transparente de todos modos.

Lo que probablemente desee hacer en su lugar es establecer el color de fondo de un div en transparente. Para hacer esto, debe usar colores rgba pero tenga en cuenta que esto es compatible con menos navegadores.

Puede leer una comparación de los dos incluyendo sus efectos e implementaciones, here.

Más información sería útil. Si el div en cuestión está suficientemente separada del resto del contenido de tal manera que, en ocasiones, que desea mostrar de forma aislada de todo lo demás, es posible que desee considerar la reestructuración de la página de modo que no está contenido en el div padre.

Answer 4

Como sugirió Jimmy Cuadra, podría cambiar la posición del div y luego agregar una superposición debajo de él ... Esto es similar a lo que hace jQuery Tools Expose.

Usted realmente no necesita un plugin para hacer esto, sin embargo, le respondí con otra pregunta un enfoque similar. Este script eliminará la superposición si hace clic en cualquier lugar fuera del div resaltado. Tenga en cuenta que esto requiere el uso de jQuery versión 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 buena técnica consiste en aplicar un contorno grande al div. Funciona con una gran sombra de caja también. Las diferencias están detalladas here.

definir una clase CSS, como highlight, con esa propiedad:

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

En Javascript, sólo se puede aplicar esa clase a su div:

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