1

重複の可能性:
CSS を使用してホバー時に兄弟要素の色を変更する

基本的に、#fb または作成したその他の div ID にカーソルを合わせてボディの背景画像を変更したいのですが、これに対する解決策がどこにも見つかりませんでした。

<body>
<div class="container">
    <div class="sixteen columns">
        <h1 class="remove-bottom" style="margin-top: 40px">Club 77</h1>
        <hr />
    </div>
    <div class="sixteen columns">
        <h3><a href="" id="fb">Facebook</a></h3>
    </div>
    <div class="sixteen columns">
        <h3><a href="">Photos</a></h3>
    </div>
    <div class="sixteen columns">
        <h3><a href="">Contact</a></h3>
    </div>

</div>

4

3 に答える 3

2

jQueryを介して行うのが最善だと思います：

初め。背景画像をプリロードします。 

$('<img/>').hide().attr('src', 'images/background.jpg').load(function(){
    $('body').append($(this));
});

2番。画像のマウスオーバー:

$('#fb').hover(function() {
    $('body').css('background-image', 'url("images/background.jpg")');
}, function() {
    $('body').css('background', '');
});

JSFiddle のデモは次のとおりです: http://jsfiddle.net/kGgyY/1/

于 2012-11-14T01:34:02.023 に答える
1

JavaScriptイベントリスナーに依存するようにフォールバックする必要があると信じてください。divの onmouseover/onmouseout をリッスンし、必要に応じてタグ#fbのクラス名を変更するもの。子のステータス<body>に基づいて要素のスタイルを変更する他の方法は見たことがありません。:hover

于 2012-11-14T00:32:49.573 に答える
0

これを行うには、body 要素 (代わりに div にする必要があります) を #fb 内にネストする必要があります。ホバー時に、ネストされた div を呼び出します。ネストされた div を絶対位置に設定し、高さ/幅を 100% に設定します。100% を超えるサイズが必要な場合は、スクロールバーが作成されるため AP を使用できません。その場合、高さ/幅 999em で固定された位置を使用できます。それはうまくいくかもしれません。いくつかの z-index の問題を解決する必要があります。

于 2012-11-14T01:20:29.490 に答える