55

cssのみを使用して別のクラスの要素にカーソルを合わせるときに、あるクラスのcssを変更する方法はありますか？

何かのようなもの：

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

「ラッパー」だけが「アイテム」の中にはなく、どこかにあります。

私は本当にこれほど単純なものにJavaScriptを使用したくないのですが、必要な場合はどうすればよいでしょうか。これが私の失敗した試みです：

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

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

[編集]

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

4

5 に答える 5

111

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

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

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

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

2番目のオプションを示すために、次Fの兄弟要素になりEます。

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

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

JSフィドルのデモンストレーション。

参照：

于 2012-05-07T14:30:39.247 に答える
11

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

他のすべての場合には、JavaScriptが必要です。jQueryとAngularのようなフレームワークは、この問題に比較的簡単に取り組むことができます。

[編集]

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

于 2012-06-12T12:40:34.497 に答える
9

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

.root:hover    .child {
   
}

于 2016-03-12T10:22:18.007 に答える
6

.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
}
于 2012-05-07T14:17:06.557 に答える
0

あなたはこれを行うことができます。
にカーソルを合わせると.item1、要素が変更され.item2ます。

.item1 {
  size:100%;
}

.item1:hover
{
   .item2 {
     border:none;
   }
}

.item2{
  border: solid 1px blue;
}
于 2020-04-06T13:10:25.157 に答える