☰

親要素にマウスをホバーしたときに子要素にスタイルを設定する 質問する

tag-icon • tag-icon css css-selectors
親要素にマウスをホバーしたときに子要素にスタイルを設定する 質問する

親要素にホバーがあるときに子要素のスタイルを変更する方法。可能であれば、CSS ソリューションを希望します。:hover CSS セレクターを使用して可能なソリューションはありますか。実際には、パネルにホバーがあるときに、パネル内のオプション バーの色を変更する必要があります。

すべての主要ブラウザをサポートする予定です。

ベストアンサー1

はい、間違いなくこれを行うことができます:

.parent:hover .child {
   /* ... */
}

これは、:hover擬似クラスを使用して、一致する要素がホバーされている要素に制限し.parent、子孫コンビネータ(スペース) を使用して、一致する子孫を選択します.child。

実際の例は以下です:

.parent {
  border: 1px dashed gray;
  padding: 0.5em;
  display: inline-block;
}

.child {
  border: 1px solid brown;
  margin: 1em;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background: #cef;
  transform: scale(1.5) rotate(3deg);
  border: 5px inset brown;
}
<div class="parent">
  parent
  <div class="child">
    child
  </div>
</div>

おすすめ記事