-1

我使用此代码在悬停/鼠标悬停上应用图像效果，但我不希望将鼠标悬停/悬停直接附加到图像上，因为顶部出现了覆盖，

jQuery('.gridfx-img img').each(function(){
    this.onmouseout = function(){
        var canvas1 = Pixastic.process(this, "desaturate");
        canvas1.onmouseover = function(){
            Pixastic.revert(this);
        }
    }
    this.onload = function(){
        var canvas = Pixastic.process(this, "desaturate");
        canvas.onmouseover = function(){
            Pixastic.revert(this);
        }
    }
});

我的目标元素是 .gridfx-img 鼠标进入/离开但是如果我改变了它，代码就不起作用。因为这必须是实际图像。我试过 this.parents() 等到目前为止没有任何效果。有任何想法吗？

4

2 回答 2

0

真的有两个选择。您可以将事件附加到叠加层，然后使用 jQuery 遍历函数从该元素导航到您想要影响的子图像。

或者，可能更可能的是，您想要关闭覆盖的鼠标事件。这将允许翻转和点击穿过图层并到达您想要效果的图像。它是在 CSS 而不是 jquery 本身中完成的 - 取决于您的叠加层是否具有任何鼠标功能。

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

#overlay {    
    pointer-events: none;
}
于 2013-09-24T10:57:07.367 回答
-1

最近的（）方法将返回与选择器匹配的节点的祖先。hover()方法接受 2种方法来处理鼠标移入和移出事件。

var container = jQuery('.gridfx-img img').closest(".gridfx-img").hover(
    function onMouseInDo(event){},
    function onMouseOutDo(event){},
)
于 2013-09-24T10:54:53.443 回答