無法獲取圖標字體/ sprite翻轉以更改顏色

我正試圖在我的主導航上方放置一些相關圖標。基本上，我試圖完成的是當用戶將鼠標懸停在適當的區域（具有大填充的標記）上時，文本和圖標會更改爲不同的顏色。我遇到了問題。無法獲取圖標字體/ sprite翻轉以更改顏色

我的想法是用圖標字體做它最簡單，但它們只是內聯的。然後，我試圖用圖標字體做一個新的位置，並將它們放置在man nav上方，但是當用戶在指定區域上空盤旋時，我無法弄清楚如何改變顏色。

我也嘗試了翻轉方法，我無法工作，因爲當我在標記中創建一個類並將顯示更改爲阻止時，它將拋出我的nav。我的代碼：

<ul id="nav" role="navigation"> 
    <li><a href="#">EXCERPT</a></li> 
    <li><a href="#">ABOUT</a></li> 
    <li><a href="#">CONTACT</a></li> 
</ul> 

#header { 
    overflow: hidden; 
    background-color: #F5F5F5; 
    border-bottom: 2px black solid; 
    position: relative; 
} 

#nav { 
    float: right; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    margin: 0 0 10px 0; 
} 

#nav li { 
    list-style: none; 
    display: inline; 
    font-size: 2.5em; 
    letter-spacing: 0.1em; 
    font-family: 'OstrichSansMedium'; 
} 

#nav a { 
    text-decoration: none; 
    color: #C4C4C4; 
    padding: 200px 20px 15px; 
} 

#nav a:hover { 
    color: #000000; 
    background-color: green; 
}

來源

2013-02-23 vytfla

它似乎有點工作..究竟是什麼問題？ – 2013-02-23 02:08:21

嗯，我無法弄清楚一種方式，無論是通過字體圖標還是Sprite翻轉，將圖標放置在導航上方，並且當用戶將鼠標懸停在標籤區域上時，它們也會變爲不同的顏色/位置。 – vytfla 2013-02-23 02:22:20

我打算爲你做一個小提琴，但是jsfiddle關閉了保養。你將不得不使用一點腳本來處理一個帶有圖像的複雜條形圖等等。精靈是非常好的和有效的，但是你至少需要幾行腳本來支持它。

Take看看tabs on jQueryUI的來源。你上面的結構只不過是一個標籤欄。

也看看這個網站。 Live Example頂部導航全部用圖像，CSS和一點點jQuery完成。抓住這一個來源，所以你可以隨時查看它。

來源

2013-02-23 02:56:39

嗯，我明白了。我真的希望有一個純粹的CSS解決方案，因爲我不知道任何編程。 – vytfla 2013-02-23 04:43:22

如果您正在爲x個元素進行簡單懸停，那麼是的，但是當您處理多個元素並聲明您需要某些東西來控制它時。你或許可以找到已經編碼的東西，它完全符合你的想法。在一些API和示例中查看[jQuery]（http://www.jquery.com）和[jQueryUI]（http://www.jqueryui.com）。你永遠不知道，可能是你理解的東西。 – 2013-02-23 05:10:19

無論如何要在文本上方放置圖標字體？ – vytfla 2013-02-24 23:02:39

無法獲取圖標字體/ sprite翻轉以更改顏色

回答

相關問題