Question

I have this function

$('*').hover(

    function (e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
        var elem = document.elementFromPoint(mouseX, mouseY);
        $(elem).addClass('hoverElem');

    },
    function (e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
        var elem = document.elementFromPoint(mouseX, mouseY);
        $(elem).removeClass('hoverElem');
    }
);

this works fine with the first function but the second function doesnt do any thing, any ideas how can i fix it?

Answer 1

Try this instead:

$('*').hover(
    function (e) {
        // Remove class from previous element
        $('.hoverElem').removeClass('hoverElem');

        // Add class to new element
        mouseX = e.pageX;
        mouseY = e.pageY;
        var elem = document.elementFromPoint(mouseX, mouseY);
        $(elem).addClass('hoverElem');
    }
);

or this:

$('*').hover(
    function (e) {
        // Add class to new element
        mouseX = e.pageX;
        mouseY = e.pageY;
        var elem = document.elementFromPoint(mouseX, mouseY);
        $(elem).addClass('hoverElem');
    }, function (e) {
        // Remove class from previous element
        $('.hoverElem').removeClass('hoverElem');
    }
);

I’m not exactly sure what you’re trying to do, so it’s a bit hard to guess.