10

必要なホバー効果を1つだけ処理するときにこれを達成するための解決策を見ていますが、メインの親divの背景をそれぞれ別の画像に変更する4つの子divが必要です。

これはCSSでは不可能だと思います。

<div id="buttonBox">
   <div id="schedBox">
     <a href="#">Schedule</a>
   </div>
   <div id="transBox">
     <a href="#">Transformation</a>
   </div>
   <div id="destBox">
     <a href="#">Destination</a>
   </div>
   <div id="inspirBox">
     <a href="#">Inspiration</a>
   </div>
</div>

または、子 div をそれぞれ異なる背景にすることもできます。1 つの子 div をホバーすると、すべての子 div の背景が別の色に変わりますが、2 番目の div にホバーすると前の div.. 後続の兄弟のみに影響を与える方法がわかりませんでした。

4

3 に答える 3

2

CSSでは実際の親セレクターを使用することはできませんが、追加の要素と配置を使用して、ケースに合わせて「ハッキング」することができます。

必要なのは、ホバーされている要素に基づいて背景を変更することです— OK！疑似要素（またはIEサポートが必要な場合は通常の要素）を追加し、絶対配置と正の位置を使用して親の上に配置しますz-index。

#buttonBox {
    position: relative;
    z-index: 1;
}

#buttonBox > div:before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

これらの配置された要素は負z-indexの値である必要があるため、他のすべてのコンテンツの下に配置されますが、親要素の背景の上に配置されます。

このようにして、次のようなルールを追加できます

#schedBox:hover:before  { background: lime;   }
#transBox:hover:before  { background: red;    }
#destBox:hover:before   { background: orange; }
#inspirBox:hover:before { background: yellow; }

そして、親の疑似背景はホバーすると変化します！

知っておくべき唯一のことは、親とバックグラウンドの役割を持つ要素の間に非静的な位置を持つ要素があってはならないということです。

これがdabbletでの実例です

于 2012-11-28T12:56:16.533 に答える
2

はい、可能です。これを試して：

#schedBox:hover, #buttonBox{
   background: red;
}

#schedBox:hover{
   background: green;
}
于 2012-12-24T23:53:05.057 に答える
0

残念ながら、CSSには親セレクターがありません。

やりたいことを達成するには、JavaScriptを使用する必要があります。

于 2012-11-25T22:25:32.120 に答える