CSS懸停/滑塊變化

我是相當新手，所以如果這對我來說很簡單，請耐心等待，因爲這對我來說並不簡單！CSS懸停/滑塊變化

我買了一個不錯的template它提供了我正在建設的一個新的美食節網站的框架。我是新來的，所以他們甚至不會讓我發佈截圖，所以我不能告訴你我是如何修改模板的！啞！

主徽標下方有幾個懸停按鈕，可以將圖像從右向左滑動。我想將它們變成懸停圖像，不會「滑動」，而只需更改鼠標懸停，如this article中所建議的那樣。

任何人都可以指向正確的方向嗎？

你可以發佈一個鏈接到截圖嗎？ – boz

你應該做什麼羅伯特是我們的圖標字體，他們允許完整的顏色變化效果，並加載更快，如果您使用多個圖標/圖像，因爲所有的圖標可以通過一個字體文件而不是6-7 http請求大圖片。圖標字體中的圖標可以通過多種方式進行更改，包括顏色懸停效果。如果你願意，並且給你一些寶貴的資源，我可以讓你成爲一個演示。 –

只需添加在你的CSS：

ul#menu:hover li{ 
    background-image: url('yourImageUrl'); 
    background-repeat: no-repeat; 
    background-position: top center; 
}

最終使用opacity使懸停圖像半透明，並且調整保證金/填充根據您的佈局

2013-01-15 13:24:28

我認爲我終於知道了你的問題，這是因爲我們看到的「鼠標懸停效果」實際上是由javascript和而不是推測的CSS3。

而爲了得到你想要的，你應該首先禁用重寫css規則的javascript。它的位置是「http://static.livedemo00.template-help.com/wt_39062/js/jquery.backgroundpos.js」

一旦js /被禁用，那麼你可以很容易地實現你的想法使用CSS3技巧你鏈接到。你可以進一步詢問如何實現，但暫時我想你想自己做。

2013-01-15 23:58:30

回答