Question

我使用此代码将图像效果应用于悬停/鼠标输出，但我不希望鼠标悬停/输出直接附加到图像，因为顶部显示了叠加层，

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鼠标输入/离开然而如果我改变了，那么代码不起作用。因为这必须是实际的形象。我试过这个.parents（）等到目前为止没有任何工作。任何想法？

Answer 1

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

或者，您可能更希望关闭叠加层的鼠标事件。这将允许翻转和点击通过图层和您想要影响的图像。它是在CSS而不是jquery本身完成的 - 取决于你的叠加层是否有任何鼠标功能。

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

#overlay {    
    pointer-events: none;
}

Answer 2

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

var container = jQuery('.gridfx-img img').closest(".gridfx-img").hover(
    function onMouseInDo(event){},
    function onMouseOutDo(event){},
)

在这种特定情况下如何检测mouseenter并留在父元素上

2 个答案: