Question

我正在尝试制作一个简单的chrome扩展程序，让我在鼠标悬停时突出显示一个元素。我试图突出显示一个元素（在元素周围添加边框阴影），但它往往会使浏览器完全变慢，以便在看起来有很多元素的网站上进行爬网，所以我正在寻找更有效的解决方案。

css文件

.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');
    });
});

Answer 1

尝试将事件绑定到document而不是分别绑定到所有元素：

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

此answer提供了有关此类事件委派的其他有趣见解。在您的特定情况下，将事件处理程序绑定到文档对象肯定是有意义的。

Answer 2

你可以使用纯CSS：

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

jQuery：通过鼠标悬停突出显示元素非常慢

2 个答案: