0

私はすべて同じクラスの div のセットを持っています (これが簡単になるのであれば、同じクラスである必要はありません)。理想的には、ユーザーがこれらの div の 1 つにカーソルを合わせると、他の div (それぞれに背景画像がある) がすべて灰色になり、現在ホバーされている div にフォーカスが置かれます。変更されていたのが div の上に置かれている場合は問題ありませんが、これに取り組む方法が本当にわかりません。ある種の兄弟セレクター？css だけを使用したいと思いますが、ソリューションに下位互換性がない場合は満足しています。

これまでの私のコードは次のとおりです。前もって感謝します！

.box:hover (SELECT ALL OTHER .BOX) {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%); }

編集：各ボックスに異なるクラスを与えて、ボックス1にカーソルを合わせると、ボックス2、3、4などが灰色になり、それぞれに対してそれを行うことができることに気づきました..しかし、これは何かのための多くのコードのようです.単純。

4

3 に答える 3

3

次のソリューションは、ナビゲーション バーのように要素が隣接している場合にのみ機能します。それはあなたの状況ではないかもしれませんが、他の人を助けることができます. クロスブラウザCSS2と言わざるを得ません。

<div>コンテナの内側を包みます：

<div class="container">
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
</div>

そしてそれを使ってコントロールする:hover

.target {
    background-color: #444;
}
.container {
    float: left;
}
.container:hover .target {
    background: #bbb;
}
.container .target:hover {
    background: #444;
}

それはここで働いています

于 2012-09-21T15:48:16.103 に答える
1

別の要素の他のすべての兄弟を選択できる兄弟コンビネータはありません。原子的には、他の回答に示されているようにこれを表しますが、同じ親の要素に対して.box:not(:hover)他のすべての要素を選択することはできません。.box:not(:hover).box:hover

+兄弟コンビネータとを使用して途中でこれを行うこともできます~が、それらは要素に続く兄弟のみを調べます。

.box:hover ~ .box {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

つまり、2 番目のボックスにカーソルを合わせると、3 番目と 4 番目のボックスのみがグレー表示され、1 番目のボックスはグレー表示されません。

CSS で前の兄弟を選択する方法はありません。現在、目的を達成する唯一の方法は、JavaScript を使用して、特定のボックスにカーソルを合わせたときに他のボックスのスタイルを切り替えることです。

于 2012-09-21T15:29:18.577 に答える
0

:not CSS3セレクターの使用

div.box:not(:hover) { ... }

これはあなたが意味するものですか...

于 2012-09-21T15:27:07.440 に答える