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

Mary-Kate Olsen
Lepaskan: 2024-11-03 03:02:29
asal
174 orang telah melayarinya

How to Prevent Parent Hover Effects When Hovering Over a Child Element in Nested DIVs?

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan