Jquery在悬停时淡出？

There is a link, with no background, and a css rule, which changes background on hover.

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

Parent bg is white, link on hover - .png background image.

父bg是白色的,链接在悬停 - .png背景图像上。

How can I do a hover effect slowly, from white to my background image?

如何从白色到背景图像慢慢地进行悬停效果?

Thanks.

---

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

3 个解决方案

#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");
  });
});

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

#2

One thing that comes to mind is strategically placing layers with backgroundimage set and layers with solid color on top of each other, and on hover, animating the Opacity property of the right thing (if the thing on top becomes transparent, the thing on bottom comes through).

我想到的一件事是战略性地将具有backgroundimage设置的图层和具有纯色的图层放在彼此的顶部,并在悬停时,为正确的事物设置Opacity属性的动画(如果顶部的东西变得透明,底部的东西就来了通过)。

#3

Transparent is not valid in IE.

透明在IE中无效。