Is there a css only way to blur the background of the page when you hover a nav link that has a dropdown menu?

Question

I am trying to a way to blur the entire page when I hover over a nav link that has children.

<header>
<div>
<div>
<div>
<nav class="bricks-nav-menu-wrapper tablet_portrait">
<ul id="menu-primary" class="bricks-nav-menu" role="menubar">
<li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-209 current_page_item menu-item-245 bricks-menu-item" role="menuitem"><a href="" aria-current="page">Home</a></li>
<li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-246 bricks-menu-item" aria-haspopup="true" aria-expanded="false" role="menuitem"><a href=""></a>
<ul role="menu" class="sub-menu">
    <li id="menu-item-322" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-322 bricks-menu-item" role="menuitem"><a> </a></li>
        <li id="menu-item-322" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-322 bricks-menu-item" role="menuitem"><a> </a></li>
    <li id="menu-item-322" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-322 bricks-menu-item" role="menuitem"><a> </a></li>
        <li id="menu-item-322" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-322 bricks-menu-item" role="menuitem"><a> </a></li>
    
</ul>
</li>
<li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247 bricks-menu-item" role="menuitem"><a></a></li>
</ul>
</nav>

</div>
</div>
</div>
</header>
<main></main>
<footer></footer>

I tried to use the class .menu-item-has-children:hover and then tried to select main and footer but I don't know how to do that, or if it is possible.