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

1つの方法はこれです：

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.

もう 1 つの方法は、jQuery を使用した JavaScript です。

$('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 に答える