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

回答