鼠标悬停在链接上时图像缓和

Question

首先我对 JavaScript/jQuery 比较陌生。

我想通过 JavaScript 或 jQuery 实现一种效果，即当鼠标悬停在链接上时，图像将“缓入”内容区域并变得可见。将鼠标移出后，图像会消失。我一直在寻找这样的技术/效果，但没有成功。

图像将缓和内容区域，覆盖背景图像。链接位于相同的内容区域中，并且在我认为可以通过 z-index 完成的图像缓动上方仍然可见。当我将鼠标悬停在下一个链接上时，将出现下一个图像。一共有三张图片。

我们将不胜感激任何帮助、指导或指导教程。

Answer 1

这可以通过 jQuery 使用 .hover() 方法轻松完成，该方法接受鼠标输入和鼠标输出的处理程序，以及 .animate() 方法来更改包含图像的不透明度：

$('.easer').hover(function(e){
    $(this).find('img').stop(true,false).animate({'opacity':'1'});
},function(e){
    $(this).find('img').stop(true,false).animate({'opacity':'0'});
});

See an example of the above here.