web-dev-qa-db-ja.com

：hoverを使用して別のクラスのCSSを変更しますか？

Cssのみを使用して別のクラスの要素にホバーするときに1つのクラスのcssを変更する方法はありますか？

何かのようなもの：

.item:hover .wrapper { /*some css*/ }

「ラッパー」のみが「アイテム」の中になく、それはどこか別の場所にあります。

私は本当にこれほど単純なものにjavascriptを使いたくありませんが、もし必要なら、どうすればいいでしょうか？これが私の失敗した試みです：

document.getElementsByClassName('item')[0].onmouseover="document.getElementsByClassName('wrapper')[0].style.background="url('some url')";";

各クラスの要素は1つだけです。テンプレートを作成したときにIDを使用しなかった理由がわからないが、それはまさにその方法であり、変更することはできない。

[編集]

メニューです。各メニュー要素には個別のクラスがあります。要素にカーソルを合わせると、サブメニューが右側にポップアップ表示されます。 「Inspect Element」ツールを使用すると、サブメニューがアクティブなときにWebサイトのHTML全体が変化することがわかります（つまり、サブメニューしかありません）。 「ラッパー」と呼ぶクラスには、サブメニューの背景を制御するcssがあります。 2つのクラスの間には、実際に関連性はありません。

javascriptcssclasshover
36
Kesarion

子要素または兄弟要素を選択する場合を除き、現時点ではCSSでは不可能です（簡単で、他の回答で説明されています）。

それ以外の場合は、JavaScriptが必要です。 jQueryとAngularなどのフレームワークは、比較的簡単にこの問題に取り組むことができます。

[編集]

新しいCSS（4）セレクター ：has（） を使用すると、親要素/クラスをターゲットにできるようになり、近い将来にCSSのみのソリューションが実行可能になります！

9
Kesarion

ホバーされた要素が別の要素（E）に影響を与える（F）には、2つのアプローチがあります。

  1. FがEの子要素、または
  2. Fは、Eの後の兄弟（または兄弟の子孫）要素です（Eは、マークアップ/ DOMに表示されますbeforeF）：

これらのオプションの最初を説明するには（Fの子孫/ E）：

.item:hover .wrapper {
    color: #fff;
    background-color: #000;
}​

2番目のオプションを示すために、FはEの兄弟要素です。

.item:hover ~ .wrapper {
    color: #fff;
    background-color: #000;
}​

この例では、.wrapperが.itemの直接の兄弟である場合（2つの間に他の要素がない場合）、.item:hover + .wrapperも使用できます。

JS Fiddleデモンストレーション 。

参照：

67
David Thomas

.wrapperが.item内にあり、IE 6でないか、.itemがタグである場合、使用するCSSは正常に機能するはずです。提案する証拠はありますか？そうじゃない？

編集：

CSSだけでは、CSSに含まれていないものには影響しません。これを実現するには、次のようにメニューをフォーマットします。

<ul class="menu">
    <li class="menuitem">
        <a href="destination">menu text</a>
        <ul class="menu">
            <li class="menuitem">
                <a href="destination">part of pull-out menu</a>
... etc ...

あなたのCSSは次のようになります：

.menu .menu {
    display: none;
}

.menu .menuitem:hover .menu {
    display: block;
    float: left;
    // likely need to set top & left
}
5
robrich

次のCSSを作成することでそれを行うことができます。ルートにホバーする場合に子クラスに影響を与えるために必要なCSSをここに置くことができます

.root:hover    .child {
   
}
3
Mohammad Gabr