偽類選擇器hover應用
阿新 • • 發佈：2018-12-25
偽類選擇器hover 主要是當滑鼠懸停在某個元素上時，其樣式會根據設定的屬性進行變化，一般用於文字或是背景圖片的修改；
說多了都是眼淚，直接上程式碼！
Eg：
圖片就不發了，主要的效果就是當滑鼠懸浮到對應的 a時，其背景圖片會發生相應的變化！<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>a-day1</title> <style> *{ padding: 0; margin: 0; } ul{ height:58px; width:960px; margin:60px auto; list-style: none; } ul li{ width:120px; height:58px; float:left; } ul li a{ display:inline-block; width:120px; height:58px; background:url("img/nav1.png") 0 0 no-repeat; line-height:58px ; text-align:center; text-decoration:none; color:white; font-size:14px; } ul li a:hover{ background:url("img/nav2.png") 0 0 no-repeat; } </style> </head> <body> <ul> <li><a href="#">點點出效果吧</a></li> <li><a href="#">點點出效果吧</a></li> <li><a href="#">點點出效果吧</a></li> <li><a href="#">點點出效果吧</a></li> <li><a href="#">點點出效果吧</a></li> <li><a href="#">點點出效果吧</a></li> <li><a href="#">點點出效果吧</a></li> <li><a href="#">點點出效果吧</a></li> </ul> </body> </html>