Bagaimana Saya Boleh Membuat Keadaan Hover CSS Berterusan Selepas Tetikus Bergerak Jauh?

Mengekalkan CSS Hover State Post-Hover

Dalam reka bentuk web, keadaan hover membenarkan elemen pada halaman berubah apabila pengguna menuding ke atas mereka. Walau bagaimanapun, dalam beberapa kes, keadaan tuding adalah wajar untuk berterusan walaupun selepas tetikus pengguna meninggalkan elemen.

Pertimbangkan coretan kod berikut:

#about {
  height: 25px;
  width: 84px;
  background-image: url('about.png');
  position: absolute;
  top: 200px;
  left: 0px;
}

#onabout {
  height: 200px;
  width: 940px;
  position: absolute;
  top: 60px;
  left: 0px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 300;
  display: none;
}

#about:hover #onabout {
  display: block;
}

Kod ini menggunakan :hover pseudo-class untuk memaparkan elemen (#onabout) apabila tetikus melayang di atas elemen lain (#about). Walau bagaimanapun, apabila pengguna mengalihkan tetikus dari #about, #onabout hilang.

Untuk memastikan keadaan tuding berterusan, CSS menyediakan beberapa pilihan. Satu pendekatan ialah memperkenalkan sifat peralihan:

#about {
  ...
  transition: 0.2s ease;
}

#about:hover #onabout {
  transition: 0.2s ease;
  opacity: 1;
}

Kod ini menambah kesan peralihan yang lancar apabila melayang di atas dan menjauhi #about. Sifat kelegapan juga diubah suai untuk memastikan bahawa #onabout kekal kelihatan selepas tetikus meninggalkan #about.

Pendekatan lain melibatkan penggunaan kelas pseudo :aktif:

#about {
  ...
  cursor: pointer;
}

#about:hover #onabout {
  display: block;
}

#about:active #onabout {
  opacity: 1;
  transition: 0.2s ease;
}

Kod ini menambah kursor untuk menunjukkan bahawa #about boleh diklik dan menggunakan :active untuk mengekalkan keadaan tuding apabila elemen diklik. Peralihan memastikan pengalaman visual yang lancar.

Akhir sekali, bagi mereka yang mencari penyelesaian yang lebih maju, CSS3 menyediakan sifat animasi-play-state:

#onabout {
  display: block;
  animation-name: hover;
  animation-play-state: paused;
}

#about:hover #onabout {
  animation-play-state: running;
}

Kod ini memperkenalkan animasi dengan @keyframes tuding perisytiharan dan menjedanya secara lalai. Apabila pengguna menuding ke atas #about, animation-play-state ditetapkan untuk berjalan, memulakan animasi dan mengekalkan keadaan tuding walaupun selepas tetikus meninggalkan elemen.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Membuat Keadaan Hover CSS Berterusan Selepas Tetikus Bergerak Jauh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!