Rumah >hujung hadapan web >tutorial css >Bagaimanakah saya boleh membuat elemen tersembunyi menukar warna latar belakangnya apabila melayang di atas elemen induknya?

Bagaimanakah saya boleh membuat elemen tersembunyi menukar warna latar belakangnya apabila melayang di atas elemen induknya?

Patricia Arquette
Patricia Arquetteasal
2024-11-22 03:04:15653semak imbas

How do I make a hidden element change its background color when hovering over its parent element?

Memanipulasi Elemen pada Tuding dengan CSS

Dalam usaha untuk mencipta elemen interaktif, anda telah menghadapi kesukaran memahami kesan lekukan CSS. Khususnya, anda ingin memaparkan maklumat tambahan apabila menuding pada elemen tertentu, tetapi kod yang disediakan nampaknya tidak berkesan.

Untuk menyelesaikan isu ini, ingat bahawa dalam CSS, anda hanya boleh melaksanakan kesan tuding pada elemen itu ialah keturunan langsung unsur yang anda legarkan.

Pertimbangkan kod berikut:

#cheetah {
  background-color: red;
  color: yellow;
  text-align: center;
}

a {
  color: blue;
}

#hidden {
  background-color: black;
}

a:hover > #hidden {
  background-color: orange;
  color: orange;
}

Dalam coretan ini, div tersembunyi disarang terus dalam elemen yang dilegarkan (tag anchor dengan teks "Cheetah"). Pengubahsuaian ini memastikan bahawa apabila anda menuding pada teg anchor, sifat div tersembunyi diubah suai.

Demonstrasi langsung kod ini boleh didapati di URL ini: http://jsfiddle.net/LgKkU/

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat elemen tersembunyi menukar warna latar belakangnya apabila melayang di atas elemen induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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