Bagaimana untuk menukar imej pada hover menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk menukar imej pada hover menggunakan CSS?

王林

Lepaskan： 2023-09-01 10:05:11

ke hadapan

1429 orang telah melayarinya

如何使用 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?">

Salin selepas log masuk

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");
}

Salin selepas log masuk

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>

Salin selepas log masuk

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!