☰

子にホバーすると親のホバー効果をオフにする必要があります 質問する

tag-icon • tag-icon css hover
子にホバーすると親のホバー効果をオフにする必要があります 質問する

<div>ネストされた'sが2つあります

<div class="parent">
    <div class="child"></div>
</div>

にマウスを移動したときにbackground表示されるを変更したいです。.parent.parent

backgroundにマウスを移動したときに が再び正常に戻るようにしたいです.child。

たとえば、内側の領域にマウスを移動したときに、外側の領域が元の状態 (灰色) に戻るようにします。

.parent {
    width: 100px;
    height: 100px;
    padding: 50px;
    background: lightgray;
}

.parent:hover {
    background: lightblue;
}

.child {
    height: 100px;
    width: 100px;
    background: darkgray;
}

.child:hover {
    background: lightblue;
}
<div class="parent">
    <div class="child"></div>
</div>

この構造を維持したい<div>ので、JavaScript ソリューションは不要です (JavaScript ソリューションはわかっていますが、純粋な CSS を維持したいのです)。

これは、「子の上にマウスを移動したときに親のスタイルを設定する方法」の重複ではありません。子の上にマウスを移動したときに親のスタイルを設定しないようにしたいのです。

ベストアンサー1

編集 2024has: 新しく追加されたセレクターで可能になりましたhttps://developer.mozilla.org/en-US/docs/Web/CSS/:has

https://stackoverflow.com/a/78110861/270209

古い回答:

基本的に次のことはできません:子要素にマウスを置いたときに親要素のスタイルを設定するにはどうすればよいでしょうか?

しかし、兄弟要素を使うのがコツです:http://jsfiddle.net/k3Zdt/8/

.parent {
  width: 100px;
  height: 100px;
  padding: 50px;
}

.child {
  height: 100px;
  width: 100px;
  background: #355E95;
  transition: background-color 1s;
  position: relative;
  top: -200px;
}

.child:hover {
  background: #000;
}

.sibling {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 50px;
  top: -50px;
  left: -50px;
  background: #3D6AA2;
  transition: background-color 1s;    
}

.sibling:hover {
  background: #FFF;
}
<div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div>

おすすめ記事