0

部門の強調表示の質問

コンテナー内で 2 つの div が重なり合っています。私が望む動作は次のとおりです。一番上の div にマウスオーバーしても、何も起こりません。下の div の上にマウスを置くと、上の div の背景の色が変わり、下の div の背景が別の色に変わります。私が試したサンプル コードでは、コンテナーの div にマウス ポインターを合わせると、上部が緑に、下部が紫に変わります。この動作を引き起こすには、下部でのマウスオーバーが必要ですが、上部でのマウスオーバーでは何もしないでください。親セレクターなどを使用してjQueryでこれを実行できるように感じますが、純粋なCSSでこれを実行できるはずです。ありがとう！

これは私が試したもので、もちろんうまくいきませんが、私がやろうとしていることのアイデアを与えてくれます.

<html>
<head>
<style>
div
{
display:inline;
border:1px dotted black;
font-family:Courier;
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
div#outer:hover #top{
background:green;
}
div#outer:hover #bottom{
background:blueviolet;
}
div#top:hover, div#bottom:hover{
background:white;
}
</style>
</head>
<body>
<div id=outer>
<div id=top>
&nbsp; &nbsp;top
</div>
<br>
<div id=bottom>
bottom
</div>
</div>
</body>
</html>
4

3 に答える 3

1

CSSを少し変更しました。基本的に大きくすることです。

ここでは順序が重要です。

外側の div の境界線のため、これは完全ではありません。

<style>
div {
    border:1px dotted black;
    font-family:Courier;
    background:white;
}

div#top, div#bottom {
    height: 200px;
    width: 200px;
}

div#outer:hover #bottom:hover {
    background:blueviolet;
}

div#outer:hover #top {
    background:green;
}

div#outer #top:hover{
    background:white;
}

div#outer{
    display:inline-block;
    border:2px solid red;
}
</style>
于 2013-08-01T14:57:17.793 に答える
0

私はあなたがこれを行うことができるとは思わない... CSSの選択は、親から子へ、またはカスケードで一方向にしか機能しない....したがって、別のdivの下にあるdivのCSSのみを変更できます。

たとえば、この jsFiddleを見てください。ご覧のとおり、下部の div のスタイルのみを変更できます。

このコード

div#fourth:hover ~ #first{
    background:green;
}

「最初の」divが「4番目の」divの上にあるため、機能しません...

とにかく、トップ div の背景を白に設定したい場合は、遅延を伴うロールオーバーが表示されます。

PS: 下手な英語で申し訳ありません。

于 2013-08-01T14:52:47.617 に答える