显示不同的悬停图标列表

Question

在http://www.elitedeafpoker.com/dev/，我试图显示“手部强度”下列表的9个有序图标（1，2，3，4，...）。现在我将它们设置为仅显示＃1图标，但我不确定当链接悬停在CSS中（也许是CSS3？）时，显示9个图标的最佳方式是什么？

HTML

<div class="div-list"> 
<h2 style="width:250px;">HAND STRENGTH</h2> 
     <ul class="list"> 
     <li><a href="#">ROYAL FLUSH</a></li> 
     <li><a href="#">STRAIGHT FLUSH</a></li> 
     <li><a href="#">FOUR OF A KIND</a></li> 
     <li><a href="#">FLUSH</a></li> 
     <li><a href="#">STRAIGHT</a></li> 
     <li><a href="#">THREE OF A KIND</a></li> 
     <li><a href="#">TWO-PAIR</a></li> 
     <li><a href="#">ONE-PAIR</a></li> 
     <li><a href="#">HIGH-CARD</a></li> 
    </ul> 
</div> 

CSS

.list {  
    list-style:none 
    overflow: hidden; 
    width:250px; 
    margin: 0px 0px 50px 0px; 
} 
.list a { 
    display: block; 
    margin-left:20px; 
} 
.list li:hover { 
    background:url(../img/handstreng.icon1.png) 0px -14px no-repeat; 
} 
.list li { 
    list-style:none; 
    background:url(../img/handstreng.icon1.png) 0px 4px no-repeat; 
    display: block; 
    overflow: hidden; 
    font-size: 14px; 
    line-height: 20px; 
    text-transform: uppercase; 
} 
.list li a { 
    color: #ffffff; 
} 
.list li a:hover { 
    color: #ff670d; 
} 

其他图标文件handstreng.icon2.png，handstreng.icon3.png等..

谢谢！

Answer 1

可以使用counters（CSS 2.1）和::before pseudo-elements CSS（和无图像）做（CSS 3）

jsfiddle demo

，因为这是一个有序列表，它有意义使用<ol>

<ol class="hand-strength"> 
    <li><a href="#">ROYAL FLUSH</a></li> 
    <li><a href="#">STRAIGHT FLUSH</a></li> 
    ... 
</ol> 

CSS

.hand-strength { 
    color:white; 
    list-style:none; 
    margin:0; 
    padding:0; 
} 
.hand-strength a { 
    color:white; 
    font-size:1rem; 
    text-decoration:none; 
} 
.hand-strength li { 
    counter-increment:hs; 
} 
.hand-strength a::before, .hand-strength a:before { 
    content: counter(hs); 
    display:inline-block; 
    width:14px; 
    height:14px; 
    line-height:14px; 
    font-size:9px; 
    text-align:center; 
    border-radius:7px; 
    background:#474747; 
    margin-right:4px; 
    position:relative; 
    top:-3px 
} 
.hand-strength a:hover { 
    color:#ff670d; 
} 
.hand-strength a:hover::before, .hand-strength a:hover:before { 
    background:#F1AD03; 
    color:#fff; 
} 

::before由现代浏览器和IE9 +

:before支持由现代浏览器和IE8 +

Answer 2

一种方法是这样的：

HTML

<div class="div-list"> 

<h2 style="width:250px;">HAND STRENGTH</h2> 
     <ul class="list"> 
     <li class="item1"><a href="#">ROYAL FLUSH</a></li> 
     <li class="item2"><a href="#">STRAIGHT FLUSH</a></li> 
     <li class="item3"><a href="#">FOUR OF A KIND</a></li> 
     <li class="item4"><a href="#">FLUSH</a></li> 
     <li class="item5"><a href="#">STRAIGHT</a></li> 
     <li class="item6"><a href="#">THREE OF A KIND</a></li> 
     <li class="item7"><a href="#">TWO-PAIR</a></li> 
     <li class="item8"><a href="#">ONE-PAIR</a></li> 
     <li class="item9"><a href="#">HIGH-CARD</a></li> 
    </ul> 
</div> 

CSS

.list {  
    list-style:none 
    overflow: hidden; 
    width:250px; 
    margin: 0px 0px 50px 0px; 
} 
.list a { 
    display: block; 
    margin-left:20px; 
} 

.list li { 
    list-style:none; 
    display: block; 
    overflow: hidden; 
    font-size: 14px; 
    line-height: 20px; 
    text-transform: uppercase; 
} 
.list li a { 
    color: #ffffff; 
} 
.list li a:hover { 
    color: #ff670d; 
} 

list li.item1 { 
    background:url(../img/handstreng.icon1.png) 0px 4px no-repeat; 
} 

list li.item2 { 
    background-image:url(../img/handstreng.icon2.png) 0px 4px no-repeat; 
} 

etc. 

.list li.item1:hover { 
    background:url(../img/handstreng.icon1.png) 0px -14px no-repeat; 
} 

.list li.item2:hover { 
    background:url(../img/handstreng.icon2.png) 0px -14px no-repeat; 
} 

etc. 

另一种方式是JavaScript的，使用jQuery

$('ul.list li').each(function(i) { 
    $(this).css('background','url(../img/handstreng.icon' + (i + 1) + '.png) 0px 4px no-repeat'); 
}); 

$('ul.list li').hover(function() { 
    $(this).css('background','url(../img/handstreng.icon' + ($(this).index() + 1) + '.png) 0px 4px no-repeat'); 
}, function() { 
    $(this).css('background','url(../img/handstreng.icon' + ($(this).index() + 1) + '.png) 0px -14px no-repeat'); 
}); 

Answer 3

您可以使用:nth-child这个，但它确实需要某种迭代。

简单的jQuery溶液：

$('.list li').each(function(i) { 
    $(this).css('background','url(../img/handstreng.icon'+(i+1)+'.png) 0px 4px no-repeat'); 
});