當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端交互之hover用法

發布時間：2023/12/16 HTML 36 豆豆

生活随笔收集整理的這篇文章主要介紹了前端交互之hover用法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前端交互之hover用法

不給源碼的博客都是耍流氓，所以，第一步，先把源碼給各位

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>hover 用法之圖片交互</title> <style> .test{position:absolute;left: 100px;top: 100px;width: 200px;height: 200px;background: url("logo.png") no-repeat center 0 transparent; } .test:hover{background: url("Coding.PNG") no-repeat center 0 transparent; } </style> </head> <body> <div class="test"></div> </body> </html>

以上就是完整源碼。現在對上述代碼進行逐一解釋

background: url("upload2.png") //在class為test的框內選定背景圖像為upload2.png,您可以選擇別的圖片，但注意圖片的路徑不要寫錯 no-repeat center 0 transparent //在class為test的框內該圖片只出現一次，如果去掉這行代碼，圖片會重復出現，填滿整個框，您可以嘗試一下 .test:hover{background: url("Coding.PNG") no-repeat center 0 transparent; //鼠標移到class為test的框內之后，它的背景圖片就變成另一張了 }

.test{
……………………
}
在鼠標沒有移動上去時
class為test的屬性

.test:hover{
……………………
}
鼠標移動到class為test的范圍之后，test的屬性。

本人之前買了一些前端的書，但都沒有看到過作者寫過這種交互方式，可以說作者很不負責。因此在工作中也走了不少彎路，網上下的源碼太長，太煩，看不懂，我上面二三十行代碼就能解決的問題，某些人故弄玄虛，搞了幾百上千行代碼，實在誤人子弟。

以下就是效果圖：
鼠標沒放到圖片上的效果

鼠標放到圖片上的效果：

本人qq:790940146,微信A790940146,如果要源碼歡迎騷擾，加Q或加微請備注自己是要源碼的。如有批評，本人虛心接受。