☰

1つの要素にマウスを置いたときに他の要素に影響を与える方法 質問する

tag-icon • tag-icon html css hover
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>

ベストアンサー1

キューブがコンテナ内に直接入っている場合:

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

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

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

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

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

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

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

おすすめ記事