2

別の div にカーソルを合わせると、div の背景色を変更しようとしています。しかし、私はそれを働かせることができません。今彼女の周りを見回していますが、似たような質問が見つかりません.

<style type="text/css">
    #main {
        width: 960px;
        height: 600px;
        margin: auto;
        position: relative;
        background: red;
    }

    #trykk {
        width: 100px;
        height: 100px;
        background-color: yellow;
    }

    #trykk:hover #main {
        background-color: green;
    }
</style>

<div id="main">
    <div id="trykk">
    </div>
</div>

それが私が使ってきたコードです。唯一の問題は、JavaScript の使用が許可されていないことです。div #trykk にカーソルを合わせたときに div #main の背景色を変更する方法はありますか?

4

3 に答える 3

6

回答に関連するデモRodik's。子を使用して選択した親を変更できないため、親要素のスタイルを変更することはできませんが、必要に応じてマークアップを変更できます。JavaScriptは使用できませんが、変更できる場合このようになるよりもマークアップ

デモ1

HTML

<div id="main">Main</div>
<div id="trykk">Trykk</div>

CSS

#main:hover + #trykk {
    background-color: green;
}

または、現在行っているように div をネストしたい場合は、セレクターを次のように変更するだけです

デモ2

HTML

<div id="main">Main
<div id="trykk">Trykk</div>
</div>

CSS

#main:hover > #trykk {
    background-color: green;
}
于 2012-11-12T12:06:50.347 に答える
1

CSS の選択は、親から子への一方向にのみ機能します。

したがって、子の状態は親の状態に影響を与えることはできません。

このタイプの機能を実装するには、 JavaScript のマウスオーバーイベントが必要です。

于 2012-11-12T12:01:44.933 に答える
0

jquery を使用すると、次のことができます。

$(function(){
    $("#trykk").hover(function(){
        $("#main").toggleClass("greenBackground");
    });
});
于 2012-11-12T12:01:56.313 に答える