如何在悬停菜单（jquery-shopify）时更改.body的背景颜色？

Question

我已经把megamenu我shopify网站，whcih工作pefectly，

不过，我想有自己的网站的背景颜色淡入当我将鼠标悬停在菜单。要具有完全相同的结果在这个网站：

http://www.johnlewis.com/

我尝试添加该功能：

$(function(){ 
$('.dc-mega').hover(function(){$('html').css('background-color','#676767') }); 
}); 

但没有工作了..。

这里是我的megamenu（Js文件）的完整jQuery代码..如果它可以帮助..。将不胜感激，谢谢你了！

/* * DC兆丰菜单 - jQuery的大型菜单 *版权所有（C）2011设计化学 * */ （函数（$）{

//define the defaults for the plugin and how to call it 
$.fn.dcMegaMenu = function(options){ 
    //set default options 
    var defaults = { 
     classParent: 'dc-mega', 
     classContainer: 'sub-container', 
     classSubParent: 'mega-hdr', 
     classSubLink: 'mega-hdr', 
     classWidget: 'dc-extra', 
     rowItems: 5, 
     speed: 'fast', 
     effect: 'fade', 
     event: 'hover', 
     fullWidth: false, 
     onLoad : function(){}, 
     beforeOpen : function(){}, 
     beforeClose: function(){} 
    }; 

    //call in the default otions 
    var options = $.extend(defaults, options); 
    var $dcMegaMenuObj = this; 

    //act upon the element that is passed into the design  
    return $dcMegaMenuObj.each(function(options){ 

     var clSubParent = defaults.classSubParent; 
     var clSubLink = defaults.classSubLink; 
     var clParent = defaults.classParent; 
     var clContainer = defaults.classContainer; 
     var clWidget = defaults.classWidget; 

     megaSetup(); 

     function megaOver(){ 
      var subNav = $('.sub',this); 
      $(this).addClass('mega-hover'); 
      if(defaults.effect == 'fade'){ 
       $(subNav).fadeIn(defaults.speed); 
      } 
      if(defaults.effect == 'slide'){ 
       $(subNav).show(defaults.speed); 
      } 
      // beforeOpen callback; 
      defaults.beforeOpen.call(this); 
     } 
     function megaAction(obj){ 
      var subNav = $('.sub',obj); 
      $(obj).addClass('mega-hover'); 
      if(defaults.effect == 'fade'){ 
       $(subNav).fadeIn(defaults.speed); 
      } 
      if(defaults.effect == 'slide'){ 
       $(subNav).show(defaults.speed); 
      } 
      // beforeOpen callback; 
      defaults.beforeOpen.call(this); 
     } 
     function megaOut(){ 
      var subNav = $('.sub',this); 
      $(this).removeClass('mega-hover'); 
      $(subNav).hide(); 
      // beforeClose callback; 
      defaults.beforeClose.call(this); 
     } 
     function megaActionClose(obj){ 
      var subNav = $('.sub',obj); 
      $(obj).removeClass('mega-hover'); 
      $(subNav).hide(); 
      // beforeClose callback; 
      defaults.beforeClose.call(this); 
     } 
     function megaReset(){ 
      $('li',$dcMegaMenuObj).removeClass('mega-hover'); 
      $('.sub',$dcMegaMenuObj).hide(); 
     } 

     function megaSetup(){ 
      $arrow = '<span class="dc-mega-icon"></span>'; 
      var clParentLi = clParent+'-li'; 
      var menuWidth = $dcMegaMenuObj.outerWidth(); 
      $('> li',$dcMegaMenuObj).each(function(){ 
       //Set Width of sub 
       var $mainSub = $('> ul',this); 
       var $primaryLink = $('> a',this); 
       if($mainSub.length){ 
        $primaryLink.addClass(clParent).append($arrow); 
        $mainSub.addClass('sub').wrap('<div class="'+clContainer+'" />'); 

        var pos = $(this).position(); 
        pl = pos.left; 

        if($('ul',$mainSub).length){ 
         $(this).addClass(clParentLi); 
         $('.'+clContainer,this).addClass('mega'); 
         $('> li',$mainSub).each(function(){ 
          if(!$(this).hasClass(clWidget)){ 
           $(this).addClass('mega-unit'); 
           if($('> ul',this).length){ 
            $(this).addClass(clSubParent); 
            $('> a',this).addClass(clSubParent+'-a'); 
           } else { 
            $(this).addClass(clSubLink); 
            $('> a',this).addClass(clSubLink+'-a'); 
           } 
          } 
         }); 

         // Create Rows 
         var hdrs = $('.mega-unit',this); 
         rowSize = parseInt(defaults.rowItems); 
         for(var i = 0; i < hdrs.length; i+=rowSize){ 
          hdrs.slice(i, i+rowSize).wrapAll('<div class="row" />'); 
         } 

         // Get Sub Dimensions & Set Row Height 
         $mainSub.show(); 

         // Get Position of Parent Item 
         var pw = $(this).width(); 
         var pr = pl + pw; 

         // Check available right margin 
         var mr = menuWidth - pr; 

         // // Calc Width of Sub Menu 
         var subw = $mainSub.outerWidth(); 
         var totw = $mainSub.parent('.'+clContainer).outerWidth(); 
         var cpad = totw - subw; 

         if(defaults.fullWidth == true){ 
          var fw = menuWidth - cpad; 
          $mainSub.parent('.'+clContainer).css({width: fw+'px'}); 
          $dcMegaMenuObj.addClass('full-width'); 
         } 
         var iw = $('.mega-unit',$mainSub).outerWidth(true); 
         var rowItems = $('.row:eq(0) .mega-unit',$mainSub).length; 
         var inneriw = iw * rowItems; 
         var totiw = inneriw + cpad; 

         // Set mega header height 
         $('.row',this).each(function(){ 
          $('.mega-unit:last',this).addClass('last'); 
          var maxValue = undefined; 
          $('.mega-unit > a',this).each(function(){ 
           var val = parseInt($(this).height()); 
           if (maxValue === undefined || maxValue < val){ 
            maxValue = val; 
           } 
          }); 
          $('.mega-unit > a',this).css('height',maxValue+'px'); 
          $(this).css('width',inneriw+'px'); 
         }); 

         // Calc Required Left Margin incl additional required for right align 

         if(defaults.fullWidth == true){ 
          params = {left: 0}; 
         } else { 

          var ml = mr < ml ? ml + ml - mr : (totiw - pw)/2; 
          var subLeft = pl - ml; 

          // If Left Position Is Negative Set To Left Margin 
          var params = {left: pl+'px', marginLeft: -ml+'px'}; 

          if(subLeft < 0){ 
           params = {left: 0}; 
          }else if(mr < ml){ 
           params = {right: 0}; 
          } 
         } 
         $('.'+clContainer,this).css(params); 

         // Calculate Row Height 
         $('.row',$mainSub).each(function(){ 
          var rh = $(this).height(); 
          $('.mega-unit',this).css({height: rh+'px'}); 
          $(this).parent('.row').css({height: rh+'px'}); 
         }); 
         $mainSub.hide(); 

        } else { 
         $('.'+clContainer,this).addClass('non-mega').css('left',pl+'px'); 
        } 
       } 
      }); 
      // Set position of mega dropdown to bottom of main menu 
      var menuHeight = $('> li > a',$dcMegaMenuObj).outerHeight(true); 
      $('.'+clContainer,$dcMegaMenuObj).css({top: menuHeight+'px'}).css('z-index','1000'); 

      if(defaults.event == 'hover'){ 
       // HoverIntent Configuration 
       var config = { 
        sensitivity: 2, 
        interval: 100, 
        over: megaOver, 
        timeout: 0, 
        out: megaOut 
       }; 
       $('li',$dcMegaMenuObj).hoverIntent(config); 
      } 

      if(defaults.event == 'click'){ 

       $('body').mouseup(function(e){ 
        if(!$(e.target).parents('.mega-hover').length){ 
         megaReset(); 
        } 
       }); 

       $('> li > a.'+clParent,$dcMegaMenuObj).click(function(e){ 
        var $parentLi = $(this).parent(); 
        if($parentLi.hasClass('mega-hover')){ 
         megaActionClose($parentLi); 
        } else { 
         megaAction($parentLi); 
        } 
        e.preventDefault(); 
       }); 
      } 

      // onLoad callback; 
      defaults.onLoad.call(this); 
     } 
    }); 
}; 
})(jQuery); 

Answer 1

您可以使用从jQuery库.mouseover()效果（检查here）

我创建了一个例子的jsfiddle具有类似的效果，你想什么实现：JSFiddle

说明： Div bg是除了菜单栏之外的其他所有内容。它只是一个半透明的黑色格子，模仿灰色的背景。默认不显示，但当你悬停菜单栏时，它会出现。菜单在这个div下面，所以它通常是可见的。该菜单也会更改以显示更多内容。如果您需要对特定代码部分的更多解释，请在下面的评论中提问。

Answer 2

这将有助于看到最后HTML是什么样子。

我的猜测是背景色以某种方式在一个较低的水平/重载集（对身体也许？）

另外，.hover有两个参数，第一个是鼠标输入回调，第二个是鼠标离开回调。您当前的代码只是添加背景颜色并且永远不会删除它。

检查API：http://api.jquery.com/hover/

希望这有助于