Bagaimana untuk Mencegah Kesan Tuding Ibu Bapa Apabila Menuding pada Elemen Anak dalam DIV Bersarang?

DIV Bersarang: Melumpuhkan Kesan Hover pada Ibu Bapa Apabila Anak Dilegar

Dalam senario ini, anda mempunyai dua elemen DIV bersarang, dilabelkan sebagai " .ibu bapa" dan ".anak." Apabila menuding di atas ".parent", anda mahu warna latar belakangnya ditukar. Walau bagaimanapun, apabila menuding pada ".child", anda mahu ".parent" kembali ke latar belakang kelabu lalainya.

Kod CSS untuk Kesan Hover Ibu Bapa dan Anak:

<code class="css">.parent {
  width: 100px;
  height: 100px;
  padding: 50px;
  background: lightgray;
}

.parent:hover {
  background: lightblue;
}

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

.child:hover {
  background: lightblue;
}</code>

Masalah:

Kod CSS di atas berjaya menggunakan kesan tuding yang diingini pada kedua-dua ".parent" dan ".child." Walau bagaimanapun, ia tidak memenuhi keperluan untuk melumpuhkan kesan tuding pada ".parent" apabila ".child" dilegar.

Penyelesaian Menggunakan Elemen Adik Beradik:

Ternyata, CSS tidak menyediakan cara langsung untuk mencapai kesan ini dengan elemen bersarang. Walau bagaimanapun, anda boleh menggunakan penyelesaian yang bijak menggunakan elemen adik beradik.

1. Tambah adik beradik DIV baharu dengan kelas ".sibling" di dalam bekas ".parent".
2. Letakkan " Elemen .sibling" untuk menutup elemen ".child" menggunakan sifat CSS 'atas' dan 'kiri'.
3. Tetapkan nilai 'z-index' yang lebih tinggi untuk ".sibling" untuk memastikan ia muncul di atas ". anak."
4. Tambahkan kesan peralihan warna latar belakang yang sama kepada ".sibling" yang anda gunakan pada ".parent."

CSS yang dikemas kini dengan Elemen Adik Beradik:

<code class="css">.parent {
  ... (unchanged)
}

.child {
  ... (unchanged)
}

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

.sibling:hover {
  background: #FFF;
}</code>

Cara Ia Berfungsi:

Apabila kursor tetikus melayang di atas ".child," warna latar belakang ".child" berubah. Pada masa yang sama, warna latar belakang ".sibling" juga berubah disebabkan oleh kesan hover yang digunakan padanya. Memandangkan ".sibling" meliputi ".child", perubahan dalam warna latar belakangnya secara berkesan mengatasi kesan tuding yang digunakan pada ".parent". Ini memberikan ilusi bahawa kesan tuding pada ".parent" telah dilumpuhkan.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Kesan Tuding Ibu Bapa Apabila Menuding pada Elemen Anak dalam DIV Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!