Bagaimana untuk Memaparkan Maklumat Tambahan tentang Element Hover Menggunakan CSS?

Cara Menyerlahkan Elemen pada Tuding dan Memaparkan Maklumat Tambahan

Anda menghadapi isu di mana anda ingin memaparkan lungsur turun -seperti kawasan apabila melayang di atas elemen tertentu, tetapi kaedah yang anda berikan tidak berfungsi seperti yang diharapkan. Mari kita terokai penyelesaian kepada masalah ini.

Satu pendekatan ialah menggunakan CSS, tetapi hanya jika div tersembunyi ialah anak langsung elemen yang anda tuding. Begini caranya:

#cheetah {
  position: relative;
}

#hidden {
  position: absolute;
  display: none;
  background-color: black;
}

#cheetah:hover #hidden {
  display: block;
  background-color: orange;
}

Dalam kod ini, kami menetapkan kedudukan div "#cheetah" kepada "relatif", yang membolehkan elemen kanak-kanak diposisikan berbanding dengannya. Kemudian, kami menetapkan kedudukan div "#hidden" kepada "mutlak" dan gaya paparan awalnya kepada "tiada". Apabila anda menuding pada "#cheetah", kami menggunakan pemilih "legar" untuk menukar gaya paparan "#hidden" kepada "sekat" dan mengemas kini warna latar belakangnya kepada oren.

Ingat, kaedah ini hanya berfungsi jika div "#hidden" ialah anak langsung unsur yang anda tuding. Jika ini berlaku, anda boleh mencapai kefungsian yang diingini menggunakan CSS sahaja. Jika tidak, anda mungkin perlu mempertimbangkan pendekatan lain, seperti menggunakan JavaScript, untuk mendapatkan kesan yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Maklumat Tambahan tentang Element Hover Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!