親にカーソルを合わせたときに子要素にスタイルを設定する

155

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

すべての主要なブラウザをサポートしようとしています。

css css-selectors

— ラジャットグプタ
ソース

273

はい、あなたは間違いなくこれを行うことができます。ちょうどのようなものを使う

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

このページによれば、すべての主要なブラウザでサポートされています。

— jtbandes
ソース

8

ありがとう、CSS3で私のWebページを実現するのを手伝ってくれました。

— Nick Taras

1

最後に、何を求めるべきかを知るのに十分なCSSを学びました。助けてくれてありがとう！これはすべての子孫に適用されることに注意してください.parent:hover > .child。

— ウィリアムT.マラード2018年

8

はい、以下のコードを使用してこれを行うことができます。

.parentDiv{
margin : 25px;

}
.parentDiv span{
  display : block;
  padding : 10px;
  text-align : center;
  border: 5px solid #000;
  margin : 5px;
}

.parentDiv div{
padding:30px;
border: 10px solid green;
display : inline-block;
align : cente;
}

.parentDiv:hover{
  cursor: pointer;
}

.parentDiv:hover .childDiv1{
border: 10px solid red;
}

.parentDiv:hover .childDiv2{
border: 10px solid yellow;
} 
.parentDiv:hover .childDiv3{
border: 10px solid orange;
}

<div class="parentDiv">
<span>Hover me to change Child Div colors</span>
  <div class="childDiv1">
    First Div Child
  </div>
  <div class="childDiv2">
    Second Div Child
  </div>
  <div class="childDiv3">
    Third Div Child
  </div>
  <div class="childDiv4">
    Fourth Div Child
  </div>
</div>

スニペットを展開

— イクバルパシャ
ソース

10

パーティーに遅刻

— -Dherya

4

この答えはいくつかの説明から利益を得るでしょう。ここには必要以上に多くのコードがあり、コードのどの部分に焦点を当てるべきかは明確ではないようです。

— ポールルーニー