0

在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 等...

谢谢！

4

3 回答 3

1

可以使用计数器(CSS 2.1) 和::before伪元素(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;
}

::before受现代浏览器和 IE9+ 支持

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

于 2013-04-09T22:04:31.720 回答
0

一种方法是：

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');
});
于 2013-04-09T21:27:48.433 回答
0

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

简单的 JQuery 解决方案：

$('.list li').each(function(i) {
  $(this).css('background','url(../img/handstreng.icon'+(i+1)+'.png) 0px 4px no-repeat');
});
于 2013-04-09T21:28:54.123 回答