css - CSS 悬停/滑块更改

Question

我是新手，如果这对您来说似乎很简单，请耐心等待，因为这对我来说并不简单！

我买了一个很好的模板，它为我正在构建的一个新的美食节网站提供了框架。我是新来的，所以他们甚至不让我发布屏幕截图，所以我无法向您展示我是如何修改模板的！哑的！

主徽标下方是几个悬停按钮，可将图像从右向左滑动。我想把它们变成不“滑动”的悬停图像，只是在鼠标悬停时改变——正如本文所建议的那样。

谁能指出我正确的方向？

Answer 1

只需添加您的 CSS：

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

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

演示：http: //jsfiddle.net/ZSGDH/

Answer 2

我想我终于知道你的问题了，它在于我们看到的“鼠标悬停效果”实际上是由 javascript 而不是假定的 CSS3 触发的。

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

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