Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar imej pada hover menggunakan CSS?

Bagaimana untuk menukar imej pada hover menggunakan CSS?

王林ke hadapan: 2023-09-01 10:05:111354semak imbas

如何使用 CSS 更改悬停时的图像？

Kelas pseudo "hover" digunakan untuk memilih dan menggunakan gaya pada elemen HTML apabila pengguna menuding tetikus di atasnya

Menukar imej pada tuding dengan CSS ialah proses mudah yang boleh menambah lapisan interaktiviti tambahan pada tapak web Di sini, kita akan mempelajari panduan langkah demi langkah untuk menukar imej pada tuding dengan CSS −

Sediakan imej

Langkah pertama untuk menukar imej pada tuding menggunakan CSS ialah mempunyai dua imej yang anda mahu gunakan: imej lalai dan imej tuding. Pastikan kedua-dua imej disimpan di tapak web anda dan anda tahu URL setiap imej.

Tambahkan imej lalai pada HTML anda

Gunakan tag img dan nyatakan sumber (src) imej. Contohnya -

<img src="Bagaimana untuk menukar imej pada hover menggunakan CSS?-image.jpg" alt="Bagaimana untuk menukar imej pada hover menggunakan CSS?">

Tambahkan peraturan tuding dalam CSS

anda

Dalam fail CSS, kami menambah peraturan untuk menukar imej pada hover kami akan melakukan ini dengan menyasarkan teg div dan menentukan kelas pseudo :hover

img:hover {
   content: url("hover-image.jpg");
}

Contoh

Berikut ialah contoh untuk menukar imej pada tuding menggunakan CSS.

<html>
<head>
   <title>Change Image on Hover in CSS</title>
   <style>
      body{ 
         text-align:center;
      }
      div {
         width: 250px;
         height: 195px;
         background:
         url("https://www.tutorialspoint.com/dip/images/black_and_white.jpg") norepeat;
         display: inline-block;
      }
      div:hover {
         background:
         url("https://www.tutorialspoint.com/dip/images/einstein.jpg") no-repeat;
      }
   </style>
</head>
<body>
   <h2>Change Image on Hover Using CSS</h2>
   <div class="card"></div>
</body>
</html>

Kesimpulan

Menggunakan CSS untuk menukar imej pada tuding ialah cara yang mudah dan berkesan untuk menambah penglibatan tambahan pada tapak web anda. Ini ialah cara terbaik untuk mencipta pengalaman interaktif untuk pengguna yang boleh membantu mereka kekal di tapak lebih lama dan meningkatkan kepuasan keseluruhan mereka.

Atas ialah kandungan terperinci Bagaimana untuk menukar imej pada hover menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html for select using class this

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk memutar imej dalam HTML?Artikel seterusnya：Bagaimana untuk memutar imej dalam HTML?

Artikel berkaitan

Lihat lagi