javascript - 当鼠标在两个元素之间移动时，鼠标悬停效果中断

Question

我正在使用 pixastic 库为图像（表格）添加模糊效果。桌子上的项目也对它们启用了相同的效果（它们具有相同的类并且在具有该类的元素上调用像素模糊效果）。

但是，当鼠标在元素之间移动时，效果会消失一毫秒然后出现，不用说，这看起来很糟糕。

在上表中，模糊像素效果被应用于桌子和桌子上的三件衬衫。当鼠标从一个元素（比如表格）移动到另一个元素时，模糊效果会中断（仅瞬间）。

这是我的代码：

// class .cItemsOnTable is elements which need to be blurred
$(document.body).on("mouseover", ".cItemsOnTable", function (event) {
    /* as the blur effect is suppose to simulate eye focus, 
       I use pixasticRevert func. to revert the blur effect 
       on other elements when mouse hovers over elements with
       class cItemsOnTable */
    pixasticRevert();
    var modelWearArray = $(".cModelWear");
    /* modelWearArray is the other elements which receive blur 
       effect if mouse is not hovering over class cItemsOnTable */
    $(modelWearArray).each(function () {
        $(this).addClass("cBlur");
        pixasticBlur();
    }
}).on("mouseleave", ".cItemsOnTable", function (event) {
    pixasticRevert();
    var itemsOnTableArray = $(".cItemsOnTable");
    $(itemsOnTableArray).each(function () {
        $(this).addClass("cBlur");
    });
    pixasticBlur();
});

Answer 1

jQuery 中有两对事件——mouseenter / mouseleave和mouseover / mouseout。仔细阅读他们的文档，然后选择更适合您需求的文档。此外，您在代码中将mouseover与mouseleave混合在一起（除非出于某种原因故意这样做）。