1つの要素がホバーされたときに他の要素に影響を与える方法

私がやりたいことは、特定のものdivがホバーされると、別ののプロパティに影響を与えることdivです。

例えば、でこのJSFiddleデモ、ときにホバーを超える#cubeことに変更background-colorはなく、私が欲しいのは、私が上にマウスを移動するときということで#container、#cube影響を受けています。

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">

  <div id="cube">
  </div>

</div>

立方体が直接コンテナ内にある場合：

#container:hover > #cube { background-color: yellow; }

キューブが（コンテナー終了タグの後）コンテナーの隣にある場合：

#container:hover + #cube { background-color: yellow; }

キューブがコンテナー内のどこかにある場合：

#container:hover #cube { background-color: yellow; }

キューブがコンテナーの兄弟である場合：

#container:hover ~ #cube { background-color: yellow; }

この特定の例では、次のものを使用できます。

#container:hover #cube {
    background-color: yellow;   
}

以来、この例では唯一の作品cubeの子ですcontainer。より複雑なシナリオでは、別のCSSを使用するか、JavaScriptを使用する必要があります。

兄弟セレクターの使用は、特定の要素の上にホバーするときに他の要素にスタイルを設定するための一般的な解決策ですが、他の要素がDOMの特定の要素に続く場合にのみ機能します。他の要素がホバーされた要素の前に実際にあるべきであるとき、私たちは何ができますか？以下のようなシグナルバー評価ウィジェットを実装したいとします。

これは実際には、CSSフレックスボックスモデルを使用して、に設定flex-directionすることで簡単に行うことができます。これによりreverse、要素はDOM内の要素とは逆の順序で表示されます。上のスクリーンショットは、純粋なCSSで実装された、このようなウィジェットからのものです。

Flexboxは、最新のブラウザの95％で非常によくサポートされています。

.rating {
  display: flex;
  flex-direction: row-reverse;
  width: 9rem;
}
.rating div {
  flex: 1;
  align-self: flex-end;
  background-color: black;
  border: 0.1rem solid white;
}
.rating div:hover {
  background-color: lightblue;
}
.rating div[data-rating="1"] {
  height: 5rem;
}
.rating div[data-rating="2"] {
  height: 4rem;
}
.rating div[data-rating="3"] {
  height: 3rem;
}
.rating div[data-rating="4"] {
  height: 2rem;
}
.rating div[data-rating="5"] {
  height: 1rem;
}
.rating div:hover ~ div {
  background-color: lightblue;
}

<div class="rating">
  <div data-rating="1"></div>
  <div data-rating="2"></div>
  <div data-rating="3"></div>
  <div data-rating="4"></div>
  <div data-rating="5"></div>
</div>

MikeとRobertcの役立つ投稿に感謝します。

HTMLに2つの要素があり、:hover1つを上書きして、もう1つの要素のスタイルの変更をターゲットにする場合、2つの要素は親、子、兄弟のいずれかに直接関連付ける必要があります。これは、2つの要素が相互に1つであるか、どちらも同じ大きな要素内に含まれている必要があることを意味します。

ユーザーが自分のサイトを読み、:hover強調表示された用語を読み進めるときに、ブラウザーの右側のボックスに定義を表示したいと思いました。したがって、「definition」要素を「text」要素内に表示したくありませんでした。

私はほとんどあきらめて、私のページにjavascriptを追加しましたが、これは将来の問題です！CSSとHTMLのバックsassに我慢して、必要な効果を実現するために要素をどこに配置する必要があるかを伝える必要はありません。最終的には妥協しました。

ファイル内の実際のHTML要素は、:hover互いに有効なターゲットとなるようにネストするか、単一の要素に含める必要がありpositionますが、css 属性を使用して、任意の場所に任意の要素を表示できます。私はposition：fixedを使用:hoverして、HTMLドキュメント内の場所に関係なく、ユーザーの画面上の必要な場所にアクションのターゲットを配置しました。

html：

<div id="explainBox" class="explainBox"> /*Common parent*/

  <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light                            /*highlighted term in text*/
  </a> is as ubiquitous as it is mysterious. /*plain text*/

  <div id="definitions"> /*Container for :hover-displayed definitions*/
    <p class="def" id="light"> /*example definition entry*/ Light:
      <br/>Short Answer: The type of energy you see
    </p>
  </div>

</div>

CSS：

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}

.def {
  display: none;
}

#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

この例では、:hover内の要素からのコマンドのターゲットは内にある#explainBoxか、内にある必要が#explainBoxあります#explainBox。#definitionsに割り当てられた位置属性により、#explainBox技術的にHTMLドキュメント内の不要な位置に配置されている場合でも、希望の場所（の外）に表示されます。

同じもの#idを複数のHTML要素に使用することは不適切なフォームと見なされることを理解しています。ただし、この場合、のインスタンスは#light、一意に#id'dされた要素内のそれぞれの位置により、独立して記述できます。id #lightこの場合に繰り返さない理由はありますか？

これだけが私にとってうまくいきました：

#container:hover .cube { background-color: yellow; }

の.cubeCssClassはどこにあり#cubeますか。

Firefox、Chrome、およびEdgeでテスト済み。

ここでは、特定のセレクターを考慮せず:hover、メイン要素の状態のみを使用して、他の要素に影響を与えることができる別のアイデアがあります。

このため、カスタムプロパティ（CSS変数）の使用に依存します。仕様を読むと、次のようになります。

カスタムプロパティは通常のプロパティなので、任意の要素で宣言でき、通常の継承とカスケード ルールで解決されます ...

メインエレメント内でカスタムプロパティを定義し、それらを使用して子エレメントのスタイルを設定するという考え方です。これらのプロパティは継承されるため、ホバー時にメインエレメント内で変更するだけです。

次に例を示します。

#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}

<div id="container">
  <div>
  </div>
</div>

なぜこれはホバーと組み合わせた特定のセレクターを使用するよりも優れているのですか？

この方法を検討に適したものにする理由を少なくとも2つ提供できます。

1. 同じスタイルを共有する多くのネストされた要素がある場合、これにより、ホバー時にそれらすべてをターゲットにする複雑なセレクターが回避されます。カスタムプロパティを使用して、親要素にカーソルを合わせると値が変更されるだけです。
2. カスタムプロパティは、任意のプロパティの値とその部分的な値を置き換えるために使用できます。たとえば、色のカスタムプロパティを定義して、、、などborderで使用できます。これlinear-gradientによりbackground-color、box-shadowホバー時にこれらのプロパティをすべてリセットする必要がなくなります。

次に、より複雑な例を示します。

.container {
  --c:red;
  width:400px;
  display:flex;
  border:1px solid var(--c);
  justify-content:space-between;
  padding:5px;
  background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
  width:30%;
  background:var(--c);
  box-shadow:0px 0px 5px var(--c);
  position:relative;
}
.box:before {
  content:"A";
  display:block;
  width:15px;
  margin:0 auto;
  height:100%;
  color:var(--c);
  background:#fff;
}

/*Hover*/
.container:hover {
  --c:blue;
}

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

上記のように、さまざまな要素の多くのプロパティを変更するために必要なCSS宣言は1つだけです。