<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);
}

更新日志

2025/2/27 12:43

查看所有更新日志

• 9f65c-feat: ✨ demo于 2025/2/27
• 0e103-fix:全文搜索样式于 2025/2/16
• 1946f-添加布尔运算于 2024/12/9
• 51ebd-docs: 初始版本于 2024/9/22

版权所有

版权归属：passwordgloo

许可证：署名-相同方式共享 4.0 国际 (CC-BY-SA-4.0)