jQuery：如何创建聚光灯效果？

我想要达到的是聚光灯效果。调暗背景，在鼠标悬停时，调亮悬停的元素

我设法使页面变暗，但是，当我将鼠标移到页面上的任何元素上时，整个页面都被白色覆盖

css

jquery代码

$(document).ready(function() {
                    $('body *').not("div.overlay").mouseover(function (e) {
                        e.stopPropagation();
                        $(this).addClass('overlay-message');
                    });

                    $('body *').not("div.overlay").mouseout(function (e) {
                        e.stopPropagation();
                        $(this).removeClass('overlay-message');
                    });
});

---

覆盖层覆盖了所有其他元素（这是覆盖层应该做的）。这有两件事阻止了它的工作：

鼠标事件不会为元素触发，因为它们被覆盖层覆盖

将“overlay message”类添加到元素中并不会改变它被覆盖的事实

放弃覆盖并使用以下CSS如何：

body {
    background-color:#ddd;    
}
body * {
    opacity: 0.3;
}
body *:hover {
    opacity: 1.0;
    background-color:#fff;
}

---

您的演示似乎不起作用。为什么不直接使用CSS

：hover

？如果你需要一个淡入淡出的效果，你甚至可以在上面使用CSS3动画。这不是一个纯白的区域，不允许您查看它下面的内容吗？@nietonfir它仍然不工作@AxGryndr仍然不工作这很好，但现在它只是选择元素及其所有父元素，有没有可能让它聚焦在鼠标悬停的特定元素上？@KJW-你想让它看起来像这样吗？这适用于文本，因为我从使用

不透明度

切换到使用

颜色

。不透明度比较棘手，因为它是累积的。是的，这就是我的目标。但现在我看到，当我将鼠标移到父div元素上时，它只突出显示该div元素，而不是所有的子元素。@KJW-这可能不是最有效的方法，但您的意思是希望它像这样工作？

body {
    background-color:#ddd;    
}
body * {
    opacity: 0.3;
}
body *:hover {
    opacity: 1.0;
    background-color:#fff;
}