Cara menggunakan hover dalam css

Kelas pseudo hover dalam CSS ialah pemilih yang sangat biasa digunakan yang membolehkan kita menukar gaya elemen apabila tetikus melayang di atasnya. Artikel ini akan memperkenalkan penggunaan hover dan memberikan contoh kod khusus.

1. Penggunaan Asas
Untuk menggunakan tuding, kita perlu mentakrifkan gaya untuk elemen dahulu, dan kemudian menggunakan kelas pseudo :hover untuk menentukan gaya yang sepadan apabila tetikus melayang.
Sebagai contoh, kami mempunyai elemen butang, dan apabila tetikus melayang di atas butang, kami mahu warna latar belakang butang bertukar kepada merah dan warna teks kepada putih.

Kod HTML:

<button class="btn">按钮</button>

Kod CSS:

.btn {
  background-color: blue;
  color: white;
}

.btn:hover {
  background-color: red;
  color: white;
}

Dalam kod di atas, .btn ialah pemilih kelas elemen butang, yang mentakrifkan gaya lalai butang. Kemudian, dalam .btn:hover, kami mentakrifkan gaya butang pada hover.

2. Aplikasi untuk elemen berbeza
Tuding boleh digunakan bukan sahaja pada elemen HTML umum, tetapi juga pada beberapa elemen khas yang lain. Di bawah ialah beberapa senario penggunaan biasa dan contoh kod khusus.

1. Pautan
   Apabila tetikus melayang di atas pautan, kami biasanya menukar warna pautan untuk mengingatkan pengguna bahawa pautan itu boleh diklik.

Kod CSS:

a:hover {
  color: red;
}

2. Gambar
   Apabila tetikus melayang di atas gambar, kita boleh menambah beberapa kesan khas pada gambar, seperti menukar ketelusan atau zum masuk atau keluar.

Kod HTML:

<img class="img lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="图片">

Kod CSS:

.img {
  transition: all 0.3s ease;
}

.img:hover {
  transform: scale(1.1);
}

Dalam kod di atas, kelas .img mentakrifkan gaya lalai imej. Apabila tetikus melayang di atas imej, kami menggunakan kelas pseudo :hover untuk menetapkan atribut transformasi supaya imej membesar 1.1 kali apabila melayang.

3. Menu Navigasi
   Untuk menu navigasi, kami biasanya menambahkan beberapa kesan animasi pada tuding tetikus untuk meningkatkan pengalaman pengguna.

Kod HTML:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>

Kod CSS:

nav ul li a {
  color: #333;
  transition: all 0.3s ease;
}

nav ul li a:hover {
  color: red;
  transform: translateY(-5px);
}

Dalam kod di atas, kami menetapkan gaya pada hover tetikus dengan menambahkan :hover pseudo-class pada teg, termasuk menukar warna dan mengimbangi sebanyak 5 piksel .

3. Kesimpulan
tuding ialah pemilih kelas pseudo yang biasa digunakan dalam CSS, yang boleh membantu kami menukar gaya elemen apabila tetikus melayang. Melalui pengenalan dan contoh kod artikel ini, saya harap ia dapat membantu semua orang lebih memahami dan menggunakan penggunaan hover. Dalam projek sebenar, semua orang boleh menggunakan hover dengan lebih fleksibel untuk mencapai kesan kaya mengikut keperluan dan idea mereka sendiri.

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