Bagaimana untuk Melumpuhkan Kesan Hover pada Ibu Bapa Apabila Melayang Di Atas Anak dalam CSS?-tutorial css-php.cn

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

DDD

Lepaskan： 2024-11-03 20:12:29

asal

355 orang telah melayarinya

How to Disable Hover Effect on Parent When Hovering Over Child in 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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!