CODEWITHSUNDEEP
cssiconscss-spritessprite
Stuart Robson
Stuart Robson

Reputation: 1149

CSS Icons & Sprites & Navigation

I'm creating a little navigation system and though I'd try my hand a CSS sprites...

My HTML is as follows 

<ul>
 <li><i class="collections"></i><a href="collections.html">My Collections</a></li>
 <li><i class="everything"></i><a href="everything.html">Everything</a></li>
 <li><i class="social"></i><a href="social.html">Social</a></li>
 <li><i class="news"></i><a href="news.html">News</a></li>
 <li><i class="shopping"></i><a href="shopping.html">Shopping</a></li>
 <li><i class="financial"></i><a href="financial">Financial</a></li>
 <li><i class="travel"></i><a href="travel">Travel</a></li>
 <li><i class="entertainment"></i><a href="entertainment">Entertainment</a></li>        
</ul>

I'm using for the icons (as the Twitter Bootstrap does this).

My CSS is

i { display: block;  background-image: url('../img/sprites.png'); background-repeat: no-repeat; background-position: top left; }

.entertainment:hover{ background-position: -32px 0; width: 16px; height: 11px; } 
.entertainment{ background-position: -58px 0; width: 16px; height: 11px; } 
.everything:hover{ background-position: -84px 0; width: 16px; height: 15px; } 
.everything{ background-position: -110px 0; width: 16px; height: 15px; } 
.collections:hover{ background-position: -136px 0; width: 16px; height: 16px; } 
.collections{ background-position: -162px 0; width: 16px; height: 16px; } 
.news:hover{ background-position: -188px 0; width: 16px; height: 16px; } 
.news{ background-position: -214px 0; width: 16px; height: 16px; } 
.shopping:hover{ background-position: -240px 0; width: 16px; height: 16px; } 
.shopping{ background-position: -266px 0; width: 16px; height: 16px; } 
.social:hover{ background-position: -313px 0; width: 16px; height: 16px; } 
.social{ background-position: -339px 0; width: 16px; height: 16px; } 
.travel:hover{ background-position: -365px 0; width: 16px; height: 16px; } 
.travel{ background-position: -391px 0; width: 16px; height: 16px; } 
.financial:hover{ background-position: -417px 0; width: 16px; height: 12px; } 
.financial{ background-position: -443px 0; width: 16px; height: 12px; }

The issue I have is I'd like the icon to change on hover but it only does it on the <i> element. I have stuff going on in the <li> and the <a> that conflicts it all.

Any ideas?

A JS Fiddle - http://jsfiddle.net/sturobson/5t6XE/

Upvotes: 0

Views: 593

Answers (1)

jussinen
jussinen

Reputation: 688

You have :hover set on the <i> tag. Try with something like:

li:hover .financial{ // CSS rules.... }

Upvotes: 1

Related Questions