CSS悬停/滑块更改

Question

我是相当新手所以如果这对你来说很简单，请耐心等待，因为这对我来说并不简单！

我买了一个很好的template，它正在为我正在建设的新食品节提供框架。我是新来的，所以他们甚至不会让我发布截图，所以我无法告诉你我是如何修改模板的！哑！

主徽标下方是几个悬停按钮，可以从右向左滑动图像。我想将它们转换为悬停图像，这些图像不会“滑动”，只需更改鼠标悬停 - 如this article中所述。

有人能指出我正确的方向吗？

Answer 1

只需添加CSS：

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

最终使用opacity使悬停图像半透明，并根据您的布局调整边距/填充

DEMO：http://jsfiddle.net/ZSGDH/

Answer 2

我认为我终于知道了你的问题，而且我们所看到的“鼠标悬停效果”实际上是由javascript和而不是引发的CSS3触发的。

为了得到你想要的东西，你应该首先禁用覆盖css规则的javascript。它的位置是“http://static.livedemo00.template-help.com/wt_39062/js/jquery.backgroundpos.js”

一旦js /被禁用，您就可以使用链接到的css3技巧轻松实现您的想法。你可以进一步询问如何实现它，但暂时我想你自己想做。