<a href="#" class="one">五彩导航</a>
<a href="#" class="two">五彩导航</a>
<a href="#" class="three">五彩导航</a>
<a href="#" class="four">五彩导航</a>

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(/css/bg1.png);
}

.two {
    background-image: url(/css/bg2.png);
}

.three {
    background-image: url(/css/bg3.png);
}

.four {
    background-image: url(/css/bg4.png);
}

.one:hover {
    background-image: url(/css/bg5.png);
}

.two:hover {
    background-image: url(/css/bg6.png);
}

.three:hover {
    background-image: url(/css/bg7.png);
}

.four:hover {
    background-image: url(/css/bg8.png);
}