I'm currently working on creating a simple chrome extension that allows me to highlight an element when hovering over it with the mouse. I've been trying to implement a feature where the element is highlighted by adding a border shadow, but this seems to significantly slow down the browser when there are many elements on the website. Therefore, I am seeking a more efficient solution.
Here is the 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;
}
This is the JavaScript code:
$(document).ready(function(){
$('*').on('mouseover',function (e) {
e.stopPropagation();
$(e.target).addClass('highlight');
}).on('mouseout', function (e) {
e.stopPropagation();
$(e.target).removeClass('highlight');
});
});