0

I am trying to dim my page when hovering over the menu. I am using ubermenu (mega menu) for the navigational menu, and also using the X theme on Wordpress.

I have added a CSS class to add a darkened background to the page. In addition, I added a piece of code to dim the page when hovering over one of the tabs for the mega menu(in this example, #menu-item-443 is the ID for one tab).

When I try testing the code out, it doesn't work at all. I tried adding it to the Cornerstone visual editor and it works within the editor, but then won't work on the actual page.

What could be the issue with why the code isn't applying to the pages?

Any help would be appreciated!

CSS code to darken the page:

.dim{
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
    display: none;

}

Code to dim the page:

$('#menu-item-443').hover(function(){
    $('.dim').fadeTo(200, 1);
}, function(){
    $('.dim').fadeTo(200, 0, function(){
        $(this).hide();
    });
});
pdas
  • 39
  • 10
  • Which html element have you given the .dim class? How have you done this? Is Jquery loaded for the website? – Ingo86 Mar 06 '18 at 19:57
  • @Ingo86 I added this to my functions.php:
    – pdas Mar 06 '18 at 21:31
  • Have you used your browser's inspector to check what's going on and if the div element with the class "dim" is actually added? – Ingo86 Mar 07 '18 at 11:35

1 Answers1

0

The second property of fadeTo is opacity, but you're using display on the element itself. You'll need to use fadeIn/fadeOut instead, as those work with the display property. So it should look something like this...

$('#menu-item-443').hover(function(e){
    e.preventDefault();
    e.stopPropagation();
    $('.dim').fadeIn(200);
}, function(){
    $('.dim').fadeOut(200, function(){
        $(this).hide();
    });
});
will
  • 1,627
  • 1
  • 10
  • 17
  • Also worth noting is that any element with display: none is not able to be transitioned through any means aside from the above function and similar ones, transitions will not fire on an element that has the display toggled. – will Mar 06 '18 at 19:58
  • Thanks for the answer! The code is still only working through cornerstone, but not on the actual page. Any idea why this may be? – pdas Mar 06 '18 at 21:27
  • Is it possible that another hover event is being bound to the same element? If that were the case it could conflict and only that action would fire. I updated the code above to prioritize this hover function. – will Mar 08 '18 at 18:48