JSFiddle - React, Tailwind, and code Playground

by Per Ă…strand

HTML

<div class="informations">
  When this is shown, other elements get white color.
</div>

<div id="logo">
  Logo
</div>

<div id="totale">
  Totale
</div>

<div class="submenu">
  Submenu
</div>

<div id="fp-nav">
  Fp-nav
</div>

CSS

.white-text {
  color: #fff;
  background-color: #000;
}

.informations {
  display: none;
}

JavaScript

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
    	if(mutationRecord.target.style.display !== "none") {
      	console.log('display changed, now visible!');
        $("#logo, #totale, .submenu, #fp-nav").addClass("white-text");
      } else {
      	console.log('display changed, now hidden!');
        $("#logo, #totale, .submenu, #fp-nav").removeClass("white-text");
      }
    });    
});

observer.observe($(".informations")[0], { attributes : true, attributeFilter : ['style'] });

setTimeout(function() {
	$(".informations").show();
  setTimeout(function() {
    $(".informations").hide();
  }, 2000);
}, 2000);