1

cssを使用してページ上の個別のdiv内の異なるリンクにカーソルを合わせると、ページ全体の背景を変更できますか？私はJSの経験があまりないので、JSが必須の場合は説明が必要になります。助けに感謝します。ありがとうございました！

4

4 に答える 4

0

divの背景色、ホバーを変更する

これはあなたを助けるかもしれません。

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

<div onmouseover="document.body.backgroundColor='yourColor';"> </div>
于 2013-01-29T15:09:49.467 に答える
0

まあ、それは何とか可能です。ページの背景を実際に変更するわけではありませんが、効果は同様です。

コードを見てください。

    body {
        background: lightblue;
    }
    a:hover:before {
        content: '';
        position: absolute;
        display: block;
        top: 0; bottom: 0; left: 0; right: 0;
        z-index: -1;
    }
    li:nth-of-type(1) a:hover:before {
        background-color: blue;
    }
    li:nth-of-type(2) a:hover:before {
        background-color: red;
    }
    li:nth-of-type(3) a:hover:before {
        background-color: green;
    }

基本的に、カーソルがリンクの上に置かれたときに疑似要素を作成するだけです。上、下、左、右が 0 の絶対位置を持つ疑似要素は、画面全体を占有し、z-index -1 を指定すると、ページ上の他のすべての要素の下に表示されます。もちろん、対応する疑似要素で背景色または画像を宣言します。

ただし、欠点があります。柔軟性がありません。たとえば、祖先要素のいずれかが静的 (デフォルト) 以外の位置を持つ場合、top、bottom、left、および right プロパティを調整する必要があるため、これを実装するのは不可能ではないにしても少し難しくなります。

于 2013-01-29T21:24:55.870 に答える
0

CSS だけを使用して、ホバーされた要素の祖先のスタイルに影響を与えることはできません。問題には JavaScript が必要です。

于 2013-01-29T15:18:47.257 に答える