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元素，以添加图标，而不是将图标应用于锚标记。

使用相同的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 */

Answer 2

那些看起来像Entypo图标，这将使它更容易做到。我使用Font Awesome，但它的概念相同。

http://fontawesome.io/icons/

http://www.entypo.com/characters/

基本上，在悬停时，文本更改

通过代码为你提供一个小提琴！

http://jsfiddle.net/WyN7w/

HTML

<ul>
    <li><i class="fa fa-bookmark"></i> Book Mark</li>
    <li><i class="fa fa-rocket"></i> Lets Fly</li>
    <li><i class="fa fa-gears"></i> Settings</li>
    <li><i class="fa fa-warning"></i> Error Messages</li>
</ul>

CSS

@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");

ul {
    width: 200px;
    height: auto;
    margin: 0;
    padding: 0;
    background: #1c6e86;
    list-style-type: none;
}

li {
    padding: 5px 0 5px 10px;
    line-height: 25px;
    color: #113945;
    display: block;
    cursor: pointer;
}

li:hover {
    background: #113945;
    color: #fff;
}

li .fa {
    margin: 0 20px 0 0;
}