html - 悬停时带有不同列表图标的 ul li

Question

这是我在 html/css 中遇到的困难。

HTML

<ul>
    <li><a href="#">General overview</a></li>
    <li><a href="#">Main features</a></li>
    <li><a href="#">E-mail and FTP features</a></li>
    <li><a href="#">Datacenter and capacity</a></li>
    <li><a href="#">CMS and scripts</a></li>
</ul>

CSS

#features li {
    width: 216px; height: 39px;
    font-size: 13px;
    padding: 6px 0 6px 0; margin: 0;
}

#features li a {
    background: url(http://www.pwnhost.com/images/listicon.png) no-repeat;
    display: block;
    padding: 10px 0 10px 45px;
    text-decoration: none;
    color: #4d71b2;
}

#features li a:hover {
    background: url(http://www.pwnhost.com/images/listselected.png) no-repeat;
    color: #fff;
}

通常有 5 个图标，悬停时有 5 个不同的图标带有背景。我只想使用图标图像来做到这一点。不使用 javascript 执行此操作的最佳方法是什么？

Answer 1

您可以在您的 css 中使用 nth-child 选择器来定位您的每个 li 元素来添加图标，而不是将图标应用到您的 anchor 标记。

使用相同的 HTML 结构，CSS 看起来像这样:

ul li:first-child {
background:url(images/icon.png) no-repeat;
padding-left: 50px; /*width of icon*/
}
ul li:first-child:hover {
background:url(images/icon-hover.png) no-repeat;
padding-left: 50px;
}

ul li:nth-child(2) {
background:url(images/second-icon.png) no-repeat;
padding-left: 50px;
}
ul li:nth-child(2):hover {
background:url(images/second-icon-hover.png) no-repeat;
padding-left: 50px;
}
/*Repeat for all other child elements */