javascript - 对整个页面进行着色，悬停时取消对选定元素的着色

Question

我正在尝试制作一个页面检查工具，其中:

• 整个页面都有阴影
• 悬停的元素没有阴影。

与灯箱类型应用程序(类似)不同，悬停的项目应保留在原位并且(理想情况下)不会重复。

最初，在查看图像灯箱实现时，我想到将叠加层附加到文档，然后在悬停时提高元素的 z 索引。然而，这种技术在这种情况下不起作用，因为覆盖层会阻止额外的鼠标悬停:

$(function() {
    window.alert('started');
    $('<div id="overlay" />').hide().appendTo('body').fadeIn('slow');


    $("p").hover(
        function () {
            $(this).css( {"z-index":5} );
        }, 
        function () {
            $(this).css( {"z-index":0} );
        }
    );

或者，JQueryTools 有一个“暴露”和“掩码”工具，我已使用下面的代码尝试过:

$(function() {
    $("a").click(function() {
         alert("Hello world!");
    });

    // Mask whole page
    $(document).mask("#222");

    // Mask and expose on however / unhover 
    $("p").hover(
        function () {
            $(this).expose();
        }, 
        function () {
            $(this).mask();
        }
    );

}); 

除非禁用初始页面屏蔽，否则悬停不起作用。有什么想法可以最好地实现这一点，使用普通的 JQuery、JQuery 工具公开或其他一些技术？谢谢你!

Answer 1

您可以做的是复制该元素并将其插入到叠加层之外的 DOM 中(具有更高的 z-index)。为此，您需要计算它的位置，但这并不太困难。

这是一个working example .

在写这篇文章时，我重新认识到一个事实:不透明度为零的东西无法触发事件。因此您不能使用 .fade()，您必须专门将不透明度设置为非零但非常小的数字。

$(document).ready(function() { init() })

function init() {
    $('.overlay').show()
    $('.available').each(function() {
       var newDiv = $('<div>').appendTo('body');
       var myPos = $(this).position()  
       newDiv.addClass('available')
       newDiv.addClass('peek')
       newDiv.addClass('demoBorder')                
       newDiv.css('top',myPos.top+'px')
       newDiv.css('left',myPos.left+'px')
       newDiv.css('height',$(this).height()+'px')
       newDiv.css('width',$(this).width()+'px')  
       newDiv.hover(function()
          {newDiv.addClass('full');newDiv.stop();newDiv.fadeTo('fast',.9)},function()
          {newDiv.removeClass('full');newDiv.fadeTo('fast',.1)})   
    })  
}