How to blur a div when a class is added inside another div?

Question

I have a mega menu element with class .dropdownOpen activated when it is hovered. Meanwhile I have to change CSS on a completely separate div outside the header div

I have to add this CSS when .dropdownOpen is acivated by JS to

#theme-page {
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

What could be the best solution? I tried pure CSS but I was not able to do it.

EDIT:

Here -was- a live example website.

When hovering on Mega menu element, there is a class added .dropdownOpen just after .has-mega-menu here:

<li id="menu-item-1068" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-mega-menu"><a class="menu-item-link js-smooth-scroll" href="/4" aria-haspopup="true">Mega menu</a>

If that class is added I need to blur the whole div #theme-page which is located way more down below.

Might help: https://stackoverflow.com/a/42121795/9192223 – hiren Feb 08 '20 at 10:34 — hiren, Feb 08 '20 at 10:34
Please post complete code including JS & Html – Ritesh Khandekar Feb 08 '20 at 10:47 — Ritesh Khandekar, Feb 08 '20 at 10:47
@RiteshKhandekar I added a live example website link – twelvell Feb 09 '20 at 00:27 — twelvell, Feb 09 '20 at 00:27

score 1 · Accepted Answer · answered Feb 09 '20 at 00:40

1

You added a tag with jQuery so we can use it and do:

jQuery('.has-mega-menu').hover(() => jQuery('#theme-page').addClass('blur'), () => jQuery('#theme-page').removeClass('blur'))

and add some css for our blur class:

.blur {
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

answered Feb 09 '20 at 00:40

Buszmen

1,978
18
25

Thanks @buszmen working! btw how can I add a small delay to it? – twelvell Feb 09 '20 at 00:49
You can use css `animation` and `keyframes` to create 3 steps: 0%, 99% with no blur and 100% with full blur. The animation duration will be your delay. If you want to smooth out the blurring, just change 99% to something smaller and play with the duration. – Buszmen Feb 09 '20 at 00:54

Sohail Ashraf · Answer 2 · 2020-02-08T11:17:52.143

You could use the MutationObserver to detect the class change.

You can read more about MutationObserver here

function addclass() {
  document.getElementById("dropdown").classList.toggle("dropdownOpen");
}

(function() {
  var e = document.getElementById("dropdown"); // the maga menu element
  var observer = new MutationObserver(function(event) {
    let otherDiv = document.getElementById("otherDiv");
    if (/.*dropdownOpen.*/.test(e.className)) {
      otherDiv.classList.add("theme-page");
    } else {
      otherDiv.classList.remove("theme-page");
    }
  });
  observer.observe(e, {
    attributes: true,
    attributeFilter: ["class"],
    childList: false,
    characterData: false
  });
})();

.dropdownOpen {
  background-color: red;
}
.theme-page {
  background-color: green;
}

<div id="dropdown">Dropdown</div>
<div id="otherDiv">Other div</div>
<button onclick="addclass()">Add Class</button>

I tried to edit this but got a console error and removed it :( — twelvell, Feb 09 '20 at 00:27
I do not remember anymore, but it was something about none existing node. The solution that Buszmen provided works very well in my case. — twelvell, Feb 09 '20 at 02:05

How to blur a div when a class is added inside another div?

2 Answers2