Comment assombrir tous les éléments sauf un spécifique

Je construis une extension Google Chrome, je travaille sur le côté droit (dans les récits de mes amis). En fait, je recherche un récit spécifique dont le nom apparaît dans l’élément d’entrée après avoir cliqué sur le bouton. Je dois assombrir / assombrir tous les autres éléments qui apparaissent dans la bordure noire de l’image, à l’exception de l’élément de droite, pendant la recherche jusqu’à ce qu’il appuie sur le bouton X

Je n’ai aucune idée de la façon d’atteindre tous les autres éléments sauf un !! 🙁

l’image : la page Facebook

J’ai trouvé mon code! Place un canevas sur l’écran et découpe la partie autour de l’élément sélectionné. Appelez simplement openOverlay(elem) où elem est l’élément que vous souhaitez mettre en surbrillance.

 var padding = 5; //Space around canvas var animDelay = 250; //Delay used in CSS animation and transition for canvas.highlight var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { divs[i].addEventListener("click", function() { openOverlay(this); }, true); } function openOverlay(elem) { var loc = elem.getBoundingClientRect(); var canvas = document.createElement("canvas"); canvas.className = "highlight"; canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext("2d"); ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.clearRect(loc.left - padding, loc.top - padding, loc.width + padding * 2, loc.height + padding * 2); document.body.appendChild(canvas); window.overlayCanvas = canvas; canvas.onclick = closeOverlay; } function closeOverlay() { delete window.overlayCanvas; this.style.opacity = 0; var self = this; setTimeout(function() { self.parentNode.removeChild(self); }, animDelay); } //Press X to close? window.addEventListener("keypress", function(e) { //120 is X if (e.which === 120 && window.overlayCanvas) closeOverlay.call(overlayCanvas); }, false);

 /* necessary part */ canvas.highlight { position: absolute; display: block; top: 0; left: 0; opacity: 0.5; -webkit-transition: opacity 250ms ease; transition: opacity 250ms ease; -webkit-animation: canvasFade 250ms ease; animation: canvasFade 250ms ease; } @-webkit-keyframes canvasFade { from { opacity: 0; } to { opacity: 0.5; } } @keyframes canvasFade { from { opacity: 0; } to { opacity: 0.5; } } /* junk styling */ div { margin: 10px; width: 100px; height: 100px; display: inline-block; background: green; cursor: pointer; } div.funky { padding: 3px 8px; margin-top: 5.2px; border-bottom: 10px solid red; }

 One
 One
 One
 One