前端交互之hover用法
生活随笔
收集整理的這篇文章主要介紹了
前端交互之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或加微請備注自己是要源碼的。如有批評，本人虛心接受。
總結
以上是生活随笔為你收集整理的前端交互之hover用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WEB测试工具---死链接检测工具xen
- 下一篇： PCB 一分钟科普之你真的懂多层板吗？