CODEWITHSUNDEEP
htmlcss
Christian
Christian

Reputation: 43

Display different hovered icon list

On http://www.elitedeafpoker.com/dev/, Im trying to display 9 ordered icons (1, 2, 3, 4,...) of the list under "Hand Strength". Right now I set them to display only #1 icon, but I wasnt sure what the best way to display 9 icons each list when the link is hovered in CSS (maybe CSS3?).

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

The other icon files are handstreng.icon2.png, handstreng.icon3.png, etc...

Thanks!

Upvotes: 0

Views: 90

Answers (3)

MikeM
MikeM

Reputation: 27415

can do with CSS (and no images) using counters (CSS 2.1) and ::before pseudo-elements (CSS 3)

jsfiddle demo

as this is an ordered list it makes sense to use <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 is supported by modern browsers and IE9+

:before is supported by modern browsers and IE8+

Upvotes: 1

Lasse Espeholt
Lasse Espeholt

Reputation: 17792

One way is this:

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.

Another way is JavaScript, with 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');
});

Upvotes: 0

js1568
js1568

Reputation: 7032

You can use :nth-child for this, but it really needs some sort of iteration.

Simple JQuery solution: 

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

Upvotes: 0

Related Questions