0

.text がホバーされている場合、どうすれば .imageis も表示できますか?

<a href="#" class="text">All My Clipboards</a>
        <a class="imageis sprite_image_base" href="#"></a>

CSSで次のようなことを試しました：

.text:hover, .imageis:hover + .text {
    background-position: -107px -311px !important;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    width: 23px;
}

注：jqueryを使用せずに純粋なcssでこれを行いたいです。

4

1 に答える 1

3

他の人が Javascript を取り入れている理由はわかりませんが、これは CSS で簡単に行うことができます。

隣接兄弟コンビネータまたは一般兄弟コンビネータを使用します。

最初に、次のように何かが起こるために .text をホバーすることを宣言し.text:hover、次に兄弟コンビネータを追加します:~または+、最後に影響を与えたい兄弟を選択します.imageis。

まとめると、次のようになります。

.text:hover + .imageis {
    /* css-stuff */
}

次のように、両方の要素の親を選択して、通常の子孫セレクターを実行することもできます。

.parent:hover .imageis {
    /* css-stuff */
}
于 2013-05-23T17:10:36.103 に答える