Bagaimana untuk Melumpuhkan Kesan Hover pada Ibu Bapa Apabila Melayang Di Atas Anak dalam CSS?

Kesan Tuding pada Kanak-kanak Melumpuhkan Kesan Tuding pada Ibu Bapa

Masalahnya:

Anda mempunyai dua

elemen dan anda mahu menukar latar belakang elemen induk .parent apabila anda menuding di atasnya. Walau bagaimanapun, apabila anda menuding pada elemen anak .kanak, anda mahu latar belakang ibu bapa kembali kepada keadaan asalnya.

Penyelesaian:

Menggunakan CSS tulen, sebelum ini mustahil untuk mencapai kesan ini secara langsung. Walau bagaimanapun, dengan pengenalan pemilih :has baru-baru ini pada tahun 2024, kini adalah mungkin untuk menangani isu ini:

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

/* The solution using the :has selector */
.parent:has(.child:hover) {
  background: lightgray;
}</code>

Dengan menyasarkan elemen induk yang mempunyai elemen anak berlegar, kami boleh melumpuhkan hover dengan berkesan kesan pada ibu bapa apabila anak dilegarkan.

Penyelesaian Terhad Sebelumnya (Pra-2024):

Sebelum pengenalan pemilih :has, penyelesaiannya ialah menggunakan elemen adik-beradik untuk mencapai kesan yang serupa:

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

.child {
  height: 100px;
  width: 100px;
  background: #355E95;
  transition: background-color 1s;
  position: relative;
  top: -200px;
}

.child:hover {
  background: #000;
}

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

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

Pendekatan ini melibatkan penciptaan elemen adik-beradik yang diletakkan di atas elemen kanak-kanak. Apabila kanak-kanak itu dilegar, warna latar belakang adik-beradik itu berubah, dengan berkesan menyembunyikan latar belakang ibu bapa.

Atas ialah kandungan terperinci Bagaimana untuk Melumpuhkan Kesan Hover pada Ibu Bapa Apabila Melayang Di Atas Anak dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css using this background issue

Kenyataan：

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