我在我的 shopify 网站上放了一个 megamenu，它运行得很好，
但是，当我将鼠标悬停在菜单上时，我希望网站的背景色淡入。要获得与该网站完全相同的结果:
我尝试添加这个功能:
$(function(){
$('.dc-mega').hover(function(){$('html').css('background-color','#676767') } );
});
但是没有成功...
这是我的 megamenu 的完整 jquery 代码(Js 文件).. 如果它可能有帮助..非常感谢，非常感谢!:
/* * DC super 菜单 - jQuery super 菜单 * 版权所有 (c) 2011 Design Chemical * */ (函数($){
//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);
最佳答案
您可以使用 jQuery 库中的 .mouseover() 效果(检查 here )
我创建了一个 JSFiddle 示例，其效果与您想要实现的效果相似:JSFiddle
解释:
Div bg 覆盖除了菜单栏以外的所有内容。它只是一个半透明的黑色 div 模仿灰色背景。默认情况下它不显示，但是当您悬停菜单栏时它会出现。菜单位于此 div 下，因此通常可见。菜单也会更改以显示更多内容。如果您需要对特定代码部分的更多解释，请在下面的评论中提问。
关于jquery - 悬停菜单时如何更改 .body 的背景颜色(Jquery - Shopify)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25572303/