Gaya elemen anak saat mengarahkan pada orangtua

155

Bagaimana mengubah gaya elemen anak ketika ada hover pada elemen induk. Saya lebih suka solusi CSS untuk ini jika memungkinkan. Apakah ada solusi yang mungkin melalui: hover penyeleksi CSS. Sebenarnya saya perlu mengubah warna bar opsi di dalam panel ketika ada hover di panel.

Mencari untuk mendukung semua browser utama.

css css-selectors

— Rajat Gupta
sumber

273

Ya, Anda pasti bisa melakukan ini. Cukup gunakan sesuatu seperti

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

Menurut halaman ini didukung oleh semua browser utama.

— jtbandes
sumber

8

Terima kasih, Anda baru saja membantu saya membuat halaman web saya menjadi hidup dengan CSS3.

— Nick Taras

1

Akhirnya cukup belajar CSS untuk tahu apa yang harus diminta, terima kasih atas bantuannya! Perhatikan bahwa ini berlaku untuk semua keturunan, jika Anda hanya ingin anak-anak, saya pikir Anda perlu .parent:hover > .child?

— William T. Mallard

8

Ya, Anda dapat melakukan ini dengan menggunakan kode di bawah ini mungkin dapat membantu Anda.

.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>

Luaskan cuplikan

— Iqbal Pasha
sumber

10

Sangat terlambat untuk pesta

— Dherya

4

Jawaban ini akan mendapat manfaat dari beberapa penjelasan. Menurut saya ada lebih banyak kode di sini daripada yang perlu ada dan tidak jelas bagian kode mana yang harus kita fokuskan.

— Paul Rooney