Question

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

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

我相信这可以通过JQuery完成，但我还不知道甚至不能开始。

示例：

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

<{1>} Hover

上的

将正文背景从.menu-item-1更改为

#fff

然后......当悬停影响结束时......回到白色。

Answer 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

Answer 2

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

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

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

3）给z-index：0到div包含background和z-index：2到content 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();
    })
})

在菜单悬停上更改站点背景图像

2 个答案: