如何在懸停菜單（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/

希望這有助於