0

できるだけ多くの投稿を整理してきましたが、解決策が見つかりません。子クラス/IDにのみ影響を与えることができるため、ネストの必要性のためにCSSはおそらくそうではありません。

これが私が必要とするものです... メインのナビゲーションを配置する必要があります。各ナビゲーション ボタンには独自のクラスがあります。メニュー項目にカーソルを合わせると、メイン サイトの背景 (本文の背景) を変更する必要があります。

これは 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) 画面のページ全体をカバーする 2 つの div (つまり、.bg1 と .bg2) の幅と高さ、および 2 つの異なる背景を作成しました。

2) コンテンツ用に 3 番目のものを作成しました。

3) 背景を含む div に z-index:0 を、コンテンツ div に z-index:2 を与えました

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 に答える