在菜单悬停时更改站点背景图像答案

【问题标题】：Change Site Background Image on Menu Hover在菜单悬停时更改站点背景图像
【发布时间】：2013-09-10 22:43:08
【问题描述】：

我一直在整理尽可能多的帖子，但我没有找到解决方案。由于嵌套需求，CSS 不太可能，因为您只能影响子类/ID。

这是我需要的... 我需要有我的主要导航到位。每个导航按钮都有自己的类。当您将鼠标悬停在菜单项上时，主站点背景（body bg）将需要更改。

我相信这可以用 JQuery 完成，但我什至不知道如何开始。

例子：

Menu Item 1 (class - .menu-item-1)

在Hover 的.menu-item-1 上

将正文背景从#fff更改为

body{background-image: url('yadayadayada.jpg');}

然后......当悬停效果结束......回到白色。

【问题讨论】：

标签： jquery background hover

【解决方案1】：

使用jQuery，试试

jQuery(function(){
    var $body = $('body');
    $('.menu-item-1').hover(function(){
        $body.css('background-image', 'url("yadayadayada.jpg")')
    }, function() {
        $body.css('background-image', '')
    })
})

演示：Fiddle

【讨论】：

那么为什么你使用var $body = $('body'); 而不是像往常一样调用 $('body') 呢？
@AhmadAnas 因为该对象可能会被多次使用，它被缓存

【解决方案2】：

我希望这就是您所发现的。我的做法如下：

1) 制作了两个 div（即 .bg1 和 .bg2）的宽度和高度，覆盖了整个屏幕页面以及两个不同的背景。

2) 为内容制作了第三个。

3) 将 z-index:0 赋予包含背景的 div 并将 z-index:2 赋予内容 div

JSFiddle : Demo

HTML

<span class="bg bg1 hide"></span>
<span class="bg bg2 hide"></span>
<div class="content">
<ul>
    <li class="menu-item-1">Item 1</li>
    <li class="menu-item-2">Item 2</li>
</ul>
</div>

CSS

body
{
    margin:0%;
    width:100%;
    height:100%;
}

.content
{
    position:absolute;
    left:0%;
    top:0%;
    margin:0%;
    height:100%;
    width:100%;
    overflow:auto;
    display:block;
    z-index:2;
}

.bg
{
    position:fixed;
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    margin:0%;
    z-index:0;
}

.bg1
{
    display:block;
    background:url(http://mooxidesign.com/wp-content/uploads/2014/04/Free-Polygonal-Low-Poly-Background-2.png) no-repeat;
        background-size:cover;
}

.bg2
{
    display:block;
    background:url(http://s3-us-west-2.amazonaws.com/i.cdpn.io/58345.EFlLy.3e949596209919be54cb61f243defd4b.png) no-repeat;
        background-size:cover;
}

.hide{display:none;}

JavaScript

jQuery(function(){
    $('.menu-item-1').hover(function(){
        $(".bg1").fadeIn();
    }, function() {
        $(".bg1").fadeOut();
    })
    $('.menu-item-2').hover(function(){
        $(".bg2").fadeIn();
    }, function() {
        $(".bg2").fadeOut();
    })
})

【讨论】：