jQuery: highlighting element via mouse hover very slow

Question

I am trying to make a simple chrome extension that lets me highlight an element on mouse hover. I am trying to highlight an element (add border shadow around element) but it tends to completely slow the browser to a crawl on sites that seem to have a lot of elements, so I am looking for a more efficient solution.

css file

.highlight {
    -moz-box-shadow: inset 0 0 5px 5px #FF0000;
    -webkit-box-shadow: inset 0 0 5px 5px #FF0000;
    box-shadow: inset 0 0 5px 5px #FF0000;
    transition: box-shadow 0.5s;
    z-index: 99999;
}

js code

$(document).ready(function(){
$('*').on('mouseover',function (e) {
    e.stopPropagation();
    $(e.target).addClass('highlight');
}).on('mouseout', function (e) {
        e.stopPropagation();
        $(e.target).removeClass('highlight');
    });
});

if it is a chrome extension you don't need to normalize your css code — siabaJS, Jul 29 '14 at 20:55

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

Try binding the event to the document instead of to all the elements separately:

$(document).ready(function() {
    $(document).on('mouseover',function (e) {
        e.stopPropagation();
        $(e.target).addClass('highlight');
    }).on('mouseout', function (e) {
        e.stopPropagation();
        $(e.target).removeClass('highlight');
    });
});

This answer provides additional interesting insights about this type of event delegation. In your specific case, binding the event handler to the document object definitely makes sense.

edited May 23 '17 at 11:50

Community

1
1

answered Jul 29 '14 at 01:27

Robby Cornelissen

91,784
22
134
156

and be aware of your transition's duration – Lior Elrom Jul 29 '14 at 01:32

score 1 · Answer 2 · answered Jul 29 '14 at 01:52

1

you can use pure CSS:

*:hover{
    box-shadow: inset 0 0 5px 5px #FF0000;
    transition: box-shadow 1s;
}

answered Jul 29 '14 at 01:52

siabaJS

375
2
12

I was about to accept your question but then I noticed that it created this weird side effect where it highlights all the parent. see the screenshot here http://imgur.com/kFfiREu – user299709 Jul 29 '14 at 05:58
i don't think there's a way around this – siabaJS Jul 29 '14 at 20:53

jQuery: highlighting element via mouse hover very slow

2 Answers2