javascript - 悬停颜色叠加 : jquery mosaic plugin

Question

如何在鼠标悬停时将封面覆盖应用到马赛克元素:http://tympanus.net/Development/GridLoadingEffects/index.html

我试图达到的效果可以在这里看到:http://ultravisualtheme.tumblr.com/

我只想复制第二个链接，但我看不懂代码。我询问对第一个链接执行的操作的原因是因为我实际上可以理解那里发生了什么，并且可以以类似的方式编写网站代码。

Answer 1

基本上，您必须在包含图像的 div 之上创建叠加层。让它成为那个 div 的 child 并使用这个 css:

#image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;
}

这里实际上不需要任何 jquery。

fiddle :http://jsfiddle.net/6bjTQ/

但是如果你仍然想使用 jquery，请使用:

$("#image").hover(function() {
    $(".overlay").css({//here goes the same css definition});
}, function() {
    $(".overlay").css({//reset css to default values after you hover out});
});