<!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>Document</title> <style> a { text-decoration: none; width: 120px; height: 58px; background-color: pink; display: inline-block; text-align: center; line-height: 50px; color: #fff; } /* 每个a的背景图不同, 单独找到每个a, 设置不同的背景图片 */ .one { background-image: url(./images/bg1.png); } .two { background-image: url(./images/bg2.png); } .three { background-image: url(./images/bg3.png); } .four { background-image: url(./images/bg4.png); } .one:hover { background-image: url(./images/bg5.png); } .two:hover { background-image: url(./images/bg6.png); } .three:hover { background-image: url(./images/bg7.png); } .four:hover { background-image: url(./images/bg8.png); } </style> </head> <body> <a href="#" class="one">五彩导航</a> <a href="#" class="two">五彩导航</a> <a href="#" class="three">五彩导航</a> <a href="#" class="four">五彩导航</a> </body> </html>
