前端互動之hover用法
阿新 • • 發佈：2018-12-05
前端互動之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或加微請備註自己是要原始碼的。如有批評，本人虛心接受。