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 3）与CSS（无图像）

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

现代浏览器和IE9 +

支持

::before 现代浏览器和IE8 +

支持

:before

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

显示不同的悬停图标列表

3 个答案: