Question

我想要实现的是聚光效果。将背景调暗，并在鼠标悬停时，将其悬停的元素变亮。

我设法将页面调暗，但是当我将鼠标悬停在页面上的任何元素上时，整个事物都会被白色覆盖。

CSS

.overlay {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color:#000;
opacity:0.8;
display:block;
z-index:1001;
}

.overlay-message{
    background-color:#fff;
    border:1px solid #000;
    opacity:1;
    z-index:1002;
}

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

http://jsfiddle.net/3RWXB/4/

Answer 1

叠加层涵盖了所有其他元素（这是叠加应该做的事情）。这样做会阻止这种情况发生：

鼠标事件从不为元素触发，因为它们被叠加层覆盖。
添加＆＃34; overlay-message＆＃34;元素的类不会改变叠加层覆盖的事实。

如何放弃叠加层并拥有以下CSS：

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

jsfiddle

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

1 个答案: