Bagaimana untuk mempengaruhi elemen lain apabila satu elemen dilegar

Question

Apa yang saya mahu lakukan ialah, apabila satu div dilegarkan, ia menjejaskan sifat div.

Contohnya, dalam demo JSFiddle ini, apabila anda menuding pada #cube ia menukar background-color melebihi #container, #cube

div {
  garis besar: 1px merah pepejal;
}

#container {
  lebar: 200px;
  ketinggian: 30px;
}

#cube {
  lebar: 30px;
  ketinggian: 100%;
  warna latar belakang: merah;
}

#cube:hover {
  lebar: 30px;
  ketinggian: 100%;
  warna latar belakang: biru;
}

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

Answer 1

Dalam contoh khusus ini, anda boleh menggunakan:

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

Contoh ini hanya berfungsi untuk kanak-kanak cube 是 container. Untuk senario yang lebih kompleks, anda perlu menggunakan CSS yang berbeza atau menggunakan JavaScript.

Answer 2

Jika kiub berada terus di dalam bekas:

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

Jika kiub berada di sebelah bekas (selepas tanda tutup bekas):

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

Jika kiub berada di suatu tempat di dalam bekas:

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

Jika kiub adalah adik beradik bekas:

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