Peranan hover dalam html-html tutorial-php.cn

Peranan hover dalam html

WBOY

Lepaskan： 2024-02-20 08:58:23

asal

715 orang telah melayarinya

Peranan hover dalam html

Peranan hover dalam HTML dan contoh kod khusus

Dalam pembangunan web, hover merujuk kepada mencetuskan beberapa tindakan atau kesan apabila pengguna menuding kursor pada elemen. Ia dilaksanakan melalui CSS :hover pseudo-class. Dalam artikel ini, kami akan memperkenalkan peranan hover dan contoh kod khusus.

Pertama, tuding membolehkan elemen menukar gayanya apabila pengguna menudingnya. Sebagai contoh, apabila menuding tetikus pada butang, warna latar belakang butang atau warna teks boleh ditukar untuk mengingatkan pengguna tentang butang yang dipilih pada masa ini. Berikut ialah contoh kod mudah:

<!DOCTYPE html>
<html>
<head>
    <style>
        .btn {
            background-color: blue;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
        }
        
        .btn:hover {
            background-color: red;
        }
    </style>
</head>
<body>
    <button class="btn">按钮</button>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, warna latar belakang awal butang adalah biru, dan apabila tetikus melayang di atas butang, warna latar belakang butang berubah kepada merah.

Kedua, hover juga boleh digunakan untuk mencipta kesan interaktif. Contohnya, apabila tetikus melayang di atas imej, kesan pembesaran boleh dipaparkan, atau pada menu navigasi, apabila tetikus melayang di atas pilihan, menu kedua boleh dipaparkan. Berikut ialah contoh kod yang menggunakan tuding untuk mencipta kesan pembesaran gambar:

<!DOCTYPE html>
<html>
<head>
    <style>
        .image {
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        
        .image img {
            width: 100%;
            height: 100%;
            transition: transform 0.3s ease-in-out;
        }
        
        .image:hover img {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div class="image">
        <img src="image.jpg" alt="图片">
    </div>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, apabila tetikus melayang di atas gambar, atribut skala gambar ditetapkan kepada 1.2, iaitu gambar dibesarkan 1.2 kali, dengan itu mencapai kesan pembesaran gambar.

Akhir sekali, tuding juga boleh digunakan untuk mengawal paparan dan menyembunyikan elemen. Contohnya, dalam senarai, apabila tetikus melayang di atas item senarai, kandungan terperinci item senarai dipaparkan. Berikut ialah contoh kod yang menggunakan tuding untuk mengawal paparan dan penyembunyian unsur:

<!DOCTYPE html>
<html>
<head>
    <style>
        .list-item {
            display: none;
        }
        
        .list:hover .list-item {
            display: block;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li class="list-item">列表项1的详细内容</li>
        <li class="list-item">列表项2的详细内容</li>
        <li class="list-item">列表项3的详细内容</li>
    </ul>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, apabila tetikus melayang di atas item senarai, kandungan terperinci item senarai dipaparkan melalui :hover pseudo- pemilih kelas.

Ringkasnya, tuding memainkan peranan penting dalam pembangunan web. Ia boleh mengubah gaya elemen, mencipta kesan interaktif dan mengawal paparan dan penyembunyian unsur. Dengan menggunakan tuding dengan betul, anda boleh menambah lebih banyak interaktiviti dan menarik pada halaman web anda.

Atas ialah kandungan terperinci Peranan hover dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!