0
我創建一個小的導航系統,雖然我會盡我的手CSS精靈......CSS圖標和精靈和導航
我的HTML如下:
<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>
我使用圖標(正如Twitter Bootstrap所做的那樣)。
我的CSS是
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; }
我已經是我想要的圖標更改懸停,但它只做它<i>
元素上的問題。我在<li>
和<a>
中發生了一些衝突。
任何想法?
一個JS小提琴 - http://jsfiddle.net/sturobson/5t6XE/
熱潮!非常感謝你:) –
酷!如果有幫助,請不要忘記標記爲答案。 :) – jussinen