The "hover" pseudo-class is used to select and apply styles to an HTML element when a user hovers their mouse over it.
Changing an image on hover with CSS is a simple process that can add an extra layer of interactivity to the website. Here, we will learn step-by-step guide to changing an image on hover with CSS −
##Prepare the images將預設影像加入到您的HTML中
<img src="如何使用 CSS 更改懸停時的圖像?-image.jpg" alt="如何使用 CSS 更改懸停時的圖像?">在你的CSS中加入一個懸停規則
img:hover { content: url("hover-image.jpg"); }Example
<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>Conclusion
以上是如何使用 CSS 更改懸停時的圖像?的詳細內容。更多資訊請關注PHP中文網其他相關文章!