Display different hovered icon list

Discussion in 'CSS Forum' started by pplexr, Apr 9, 2013.

  1. pplexr

    pplexr New Member

    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\[code\]<div class="div-list"><h2 style="width:250px;">HAND STRENGTH</h2> <ul class="list"> <li><a href="http://stackoverflow.com/questions/15912768/#">ROYAL FLUSH</a></li> <li><a href="http://stackoverflow.com/questions/15912768/#">STRAIGHT FLUSH</a></li> <li><a href="http://stackoverflow.com/questions/15912768/#">FOUR OF A KIND</a></li> <li><a href="http://stackoverflow.com/questions/15912768/#">FLUSH</a></li> <li><a href="http://stackoverflow.com/questions/15912768/#">STRAIGHT</a></li> <li><a href="http://stackoverflow.com/questions/15912768/#">THREE OF A KIND</a></li> <li><a href="http://stackoverflow.com/questions/15912768/#">TWO-PAIR</a></li> <li><a href="http://stackoverflow.com/questions/15912768/#">ONE-PAIR</a></li> <li><a href="http://stackoverflow.com/questions/15912768/#">HIGH-CARD</a></li> </ul></div>\[/code\]CSS\[code\].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;}\[/code\]The other icon files are handstreng.icon2.png, handstreng.icon3.png, etc...Thanks!
     

Share This Page