mouseover effect breaks when mouse moves between two elements

Question

I am using the pixastic library to add blur effect to an image (table). The items on the table also have the same effect enabled on them (they have the same class & the pixastic blur effect is being called on on elements with the class).

However, when the mouse moves between the elements, the effect disappears for a millisecond & then appears, needless to say, this looks awful.

In the table above, the blur pixastic effect is being applied to the table & the three blouses on the table. The blur effect breaks (for only an instant) when the mouse moves from one element (say table) to another.

Here is my code:

// 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

There are two pairs of events in jQuery - mouseenter/mouseleave and mouseover/mouseout. Read thorougly their docs and pick the one that suit your needs better. Also, you mixed mouseover with mouseleave in the code (unless that's on purpose for some reason).