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

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 Mengesan Penyemak Imbas Pegang Tangan dengan Amanah dalam Reka Bentuk Web Responsif? 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

• Mengapa Internet Explorer Melemparkan Ralat 'console is undefined' dan Bagaimana Saya Boleh Membetulkannya?
  2024-11-15 07:44:03
• Bagaimana Memaksa Muat Turun Fail dalam PHP: Memastikan Muat Turun Daripada Main Semula?
  2024-11-15 07:43:02
• Mengapakah Penukaran `1` kepada Aksara dalam Java Menghasilkan Output Kosong?
  2024-11-15 07:42:02
• Bagaimanakah pemalar harus dinamakan dalam Go?
  2024-11-15 07:41:02
• Mengapa Kod PHP Saya Melemparkan Ralat 'Fatal: Call to undefined function sqlsrv_connect()'?
  2024-11-15 07:40:02
• Bagaimana untuk Membuat Div Bersebelahan dengan Lebar Auto Sama menggunakan CSS?
  2024-11-15 07:39:03
• `simpan`, `berterusan`, `kemas kini`, `saveOrUpdate` dan `cantum` Hibernate: Bila Perlu Menggunakan Yang Mana?
  2024-11-15 07:38:02
• Bagaimanakah Saya Membetulkan Div ke Bahagian Atas Viewport pada Tatal dengan CSS?
  2024-11-15 07:37:02
• Mengapa 'go build' Lambat Selepas Kemas Kini Go?
  2024-11-15 07:36:02
• Bagaimana Mengeluarkan Nilai Kunci Khusus dalam Kamus dan Senarai Bersarang dengan Cekap?
  2024-11-15 07:35:02

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

2

1846

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

10

2017

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

1698

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

1598

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1615

Topik-topik yang berkaitan

Lagi>

• Pengenalan kepada Dokumen dalam JS
• Ensiklopedia penggunaan Printf
• Bagaimana untuk menyelesaikan scripterror
• Penggunaan getproperty
• Penjelasan terperinci tentang fungsi garpu Linux
• Bagaimana dengan pertukaran Binance?
• penggunaan operator shift js
• Pengenalan kepada sebab mengapa desktop jauh tidak dapat disambungkan