0

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

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

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

例子：

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

关于Hover_.menu-item-1

将身体背景从 更改#fff为

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

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

4

2 回答 2

2

使用 jQuery，尝试

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

演示：小提琴

于 2013-09-10T22:46:20.723 回答
0

我希望这就是你所发现的。我的方法如下：

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

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

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

JSFiddle：演示

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();
    })
})
于 2015-05-12T20:18:21.470 回答