代码:
<! DOCTYPE html >
< html lang = " en" > < head> < meta charset = " UTF-8" > < meta http-equiv = " X-UA-Compatible" content = " IE=edge" > < meta name = " viewport" content = " width=device-width, initial-scale=1.0" > < title> 案例</ title> < style> .nav a { display : inline-block; width : 120px; height : 58px; background-color : pink; text-align : center; line-height : 48px; text-decoration : none; color : #fff; } .nav .bg1 { background : url ( images/bg1.png) no-repeat; } .nav .bg1:hover { background-image : url ( images/bg11.png) ; } .nav .bg2 { background : url ( images/bg2.png) no-repeat; } .nav .bg2:hover { background-image : url ( images/bg22.png) ; } .nav .bg3 { background : url ( images/bg3.jpg) no-repeat; } .nav .bg3:hover { background-image : url ( images/bg1.png) ; } .nav .bg4 { background : url ( images/bg4.png) no-repeat; } .nav .bg4:hover { background-image : url ( images/bg2.png) ; } .nav .bg5 { background : url ( images/bg5.png) no-repeat; } .nav .bg5:hover { background-image : url ( images/bg4.png) ; } </ style>
</ head> < body> < div class = " nav" > < a href = " #" class = " bg1" > 五彩导航</ a> < a href = " #" class = " bg2" > 五彩导航</ a> < a href = " #" class = " bg3" > 五彩导航</ a> < a href = " #" class = " bg4" > 五彩导航</ a> < a href = " #" class = " bg5" > 五彩导航</ a> </ div> </ div>
</ body> </ html>
结果