Noircir le contenu en laissant une page div visible

Question

Donc, je cherche à faire quelque chose comme ce que fait l'outil inspecteur de la pomme, mais avec CSS pour un projet sur lequel je travaille. Donc, l'idée est sur une certaine page du site, le site est ombragé (un peu comme une lightbox ou une thickbox) mais certains autres éléments sont encore visibles. Ceci est similaire à ce que fait Safari lorsque vous inspectez un élément. Il noircit le reste de la page, en dehors de cet élément.

Alors, une idée?

À la votre!

J

Answer 1

Avec juste CSS? Si oui, le mieux que je puisse trouver est la suivante:

<style> 
a:hover *:not(#except) 
{ 
    background:green; 
} 
</style> 
<a href="#"> 
    Link 
    <p> 
     green 
    </p> 
    <p id="except"> 
     black 
    </p> 
</p> 

Malheureusement, le: non sélecteur() fait partie de CSS3 et la plupart des navigateurs ne supportent pas encore (mais fait Safari 4). C'est une possibilité, mais pas si belle.

Une autre option serait avec Javascript. Si vous travaillez uniquement avec des éléments de blocs rectangulaires, comment faire pour que les valeurs x et y de l'élément restent normales, puis découpez quatre pièces (haut, bas, gauche, droite) de cet élément. Positionnez absolument certains divs dont l'arrière-plan est un fichier PNG semi-transparent. ie.

------------------ 
|lef|---up---|rig| 
|t--|________|ht-| 
|---| normal |---| 
|---|________|---| 
|---|-down---|---| 
------------------ 

Answer 2

En travaillant avec Dojo widgets JavaScript, il met en oeuvre les boîtes de dialogue modales en ayant un grand élément caché (display:none; background-color:#000; opacity:0.5;) la plupart du temps, bien positionné pour couvrir l'écran (position:absolute; top:0; left:0; et de la largeur et de la hauteur définie par le langage Javascript pour la taille de la fenêtre complète). Ensuite, il reçoit une valeur z-index et tous les éléments destinés à être visibles reçoivent un index z au-dessus. Si vous pouvez positionner de façon relative ou absolue tous les éléments que vous voulez mettre en évidence, cette méthode fonctionnerait pour vous.