Bagaimana untuk Menggantung Kesan Hover Ibu Bapa Apabila Melayang Pada Elemen Kanak-kanak?

Penyelesaian CSS

Mencapai tingkah laku ini tanpa JavaScript memerlukan penyelesaian yang bijak menggunakan elemen adik beradik.

<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;
}

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

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

<code class="html"><div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div></code>

Helah Elemen Adik Beradik

Elemen adik beradik diletakkan secara mutlak dalam elemen induk dan bertindih dengan ibu bapa dan anak elemen. Ia melangkaui sempadan induk untuk menangkap semua acara tuding secara berkesan yang tidak menyasarkan elemen anak secara khusus.

Apabila elemen adik beradik dituding, warna latar belakangnya bertukar kepada putih, sekali gus membatalkan kesan tuding ibu bapa secara visual. Apabila elemen anak dilegar, kesan tudingnya sendiri kekal, tetapi unsur adik beradik putih menyembunyikan kesan leding ibu bapa.

Perkembangan Terkini

Perhatikan bahawa :has( ) pemilih kini wujud, membolehkan penyasaran langsung unsur induk berdasarkan kehadiran keturunan tertentu. Pendekatan ini boleh digunakan untuk mencapai tingkah laku yang diingini dengan lebih elegan.

<code class="css">.parent:has(.child:hover) {
  background: lightgray !important;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Menggantung Kesan Hover Ibu Bapa Apabila Melayang Pada Elemen Kanak-kanak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!