Highlighting elements the cursor is on using mouseenter/mouse leave is very slow

I am trying to use the cursor to highlight elements the cursor lands on, and when the cursor leaves it restores it to its original color. The problem is that it does not respond to every element the cursor lands on, and sometimes the highlighting remains even if the cursor has left.

JS

$('body').mouseenter(function(evt){
    if(popusIsOpen) {
        $(evt.target).toggleClass('mouseOn', true);
    }
});

$('body').mouseleave(function(evt){
    if(popusIsOpen) {
        $(evt.target).toggleClass('mouseOn', false);
    }
});

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if(request.function == 'popup') {
            popusIsOpen = true;
        }

    });

CSS

.mouseOn {
    background-color: #99ccff
}