masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menukar Warna Latar Belakang Div pada Hover dan Jadikannya Boleh Diklik?

Bagaimana untuk Menukar Warna Latar Belakang Div pada Hover dan Jadikannya Boleh Diklik?

DDD
Lepaskan： 2024-11-04 12:11:01
asal
753 orang telah melayarinya

How to Change a Div's Background Color on Hover and Make it Clickable?

Cara Menukar Warna Latar Belakang div pada Tuding

Soalan:

Apabila cuba untuk tukar warna latar belakang div pada tuding tetikus, hanya pautan dalam div bertukar warna dan bukannya keseluruhan div. Bagaimanakah saya memanjangkan perubahan warna kepada keseluruhan div? Selain itu, bagaimanakah saya boleh menjadikan keseluruhan div bertindak sebagai pautan apabila mengklik?

Jawapan:

Isu timbul kerana pemilih "a:hover" hanya mempengaruhi elemen dalam div. Untuk menukar warna keseluruhan div, anda harus menggunakan "div:hover" sebaliknya.

Untuk menukar gelagat div supaya mengklik di mana-mana di dalamnya menavigasi ke alamat yang ditetapkan, langkah berikut diperlukan :

  1. Tetapkan ID HTML kepada div:
  2. Dalam CSS, gunakan sintaks berikut untuk menetapkan warna latar belakang: #myDiv: hover { background: grey;}
  3. Untuk menjadikan div boleh diklik, tambah kursor: penunjuk; kepada CSS: #myDiv { cursor: pointer;}

Alternatif untuk Div ​​Berkumpulan:

Jika anda ingin mengubah suai warna latar belakang berbilang div, berikan mereka kelas CSS:

. Kemudian, gunakan CSS berikut: .myClass:hover { background: grey;}

Petua Tambahan:

  • Untuk menggunakan kesan tuding hanya pada yang tertentu div, gunakan pemilih ID HTML.
  • Untuk mengubah suai kumpulan div, gunakan pemilih kelas CSS.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Warna Latar Belakang Div pada Hover dan Jadikannya Boleh Diklik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn
Artikel sebelumnya：Bagaimana untuk Mencipta Bayangan Teks Dalaman dengan Unsur Pseudo CSS? Artikel seterusnya：Bolehkah Atribut Data HTML5 Mengubah Nilai CSS?
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2244
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2384
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1992
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1881
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1950
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan