jquery - CSS3（或jQuery）淡入图像

Question

所以，我有一点代码，我想修改它做的是有一个特定的背景图像，然后在悬停时淡入不同的背景图像。我只是想知道，CSS3 还是 jQuery。如果你想推荐一个，一个关于如何实现这一目标的好地方也很好。

Answer 1

见样本：

http://jsfiddle.net/GaYKF/56/

使用jQuery：

 $("#myDiv").hover(
function(){
  $(this).fadeTo('slow', 0.3, function()
    {
        $(this).css('background-image', 'url("http://1.bp.blogspot.com/-tOHKWImzMJQ/TlHqjy1C_II/AAAAAAAAAWw/T5WGegi1sVc/s320/blue+%25288%2529.jpg")');
    }).fadeTo('slow', 1);
}, 
function(){
   $(this).fadeTo('slow', 0.3, function()
    {
        $(this).css('background-image', 'url("http://1.bp.blogspot.com/-nI97Eqlkfh0/TlHp2CS0_XI/AAAAAAAAAWU/kRGbOd6YNZg/s320/blue+%25281%2529.jpg")');
    }).fadeTo('slow', 1);
});

Answer 2

要完成 Mennan 的解决方案，如果您使用 jQuery，请这样做以更改悬停在元素上的背景图像（<div>在本例中）。

$('#mydiv').mouseenter( function() {
  $(this).css('background-image','url(/images/second.png)');
}).mouseleave(function() {
  $(this).css('background-image','url(/images/original.png)');
});