Jquery在悬停时淡出<IMAGE background>？

【问题标题】：Jquery fade <IMAGE background> on hover?Jquery在悬停时淡出<IMAGE background>？
【发布时间】：2009-04-30 20:28:28
【问题描述】：

有一个没有背景的链接和一个 css 规则，它在悬停时改变背景。

父背景为白色，悬停时链接 - .png 背景图片。

我怎样才能慢慢地做一个悬停效果，从白色到我的背景图片？

谢谢。

li a {}
li a:hover { background: url(image.png) 0 0 no-repeat; }

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

CSS

li {
  background: #FFF;
}

li a {
  opacity: 0;
  display:block;
  height:200px; /* Image height */
  width:200px; /* Image width */
  background:transparent url(image.png) top left no-repeat;
}

JavaScript

$(function(){
  $("li a").hover(function(){
    $(this).stop();
    $(this).animate({"opacity":1}, "slow");
  }, function(){
    $(this).stop();
    $(this).animate({"opacity":0}, "slow");
  });
});

见http://docs.jquery.com/Effects

【讨论】：

链接中的初始文本有问题，它消失得很慢。
如果你的锚点包含文本，那么文本会随着背景淡入淡出。您必须使用不同的 HTML 布局，例如
Text
，然后绝对定位 span。

没有机会将其绝对定位在该页面上。还有其他方法吗？

【解决方案2】：

想到的一件事是策略性地将设置了 backgroundimage 的图层和设置为纯色的图层放在彼此的顶部，并且在悬停时，为正确事物的 Opacity 属性设置动画（如果顶部的事物变得透明，则事物底部通过）。

【讨论】：

【解决方案3】：

透明在 IE 中无效。

【讨论】：