jQuery Add Transparent Overlay on Menu Hover

Question

I am trying to recreate the effect found here

When hovering over the mega menu li > a element the background / opacity changes over the page wrapper I am assuming but I am not sure the best way to achieve this with jQuery.

Should I use css to change the background or opacity or jQuery itself to try to recreate this effect.

Any pointers would be much appreciated.

Answer 1

You don't need Javascript to accomplish that :)

Use position: fixed on the inner child of your li like this:

<li>
   <a href="#"></a>
   <div class="overlay"></div>
</li>

and..

.overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

li:hover .overlay {
   display: block;
}

Example: http://jsfiddle.net/serb4q2v/