Question

首先，我对JavaScript / jQuery相对较新。

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

图像将轻松覆盖内容区域，覆盖背景图像。这些链接位于相同的内容区域，并且仍然可以在图像上方看到，我认为我可以通过z-index完成。当我将鼠标悬停在下一个链接上时，将显示下一个图像。总共会有三张图片。

任何有关这方面的教程的帮助，指导或指导都将非常感激。

Answer 1

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

$('.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.

链接鼠标悬停时图像易于使用

1 个答案: