对整个页面进行着色，在悬停时对选定的元素进行着色 [英] Shade entire page, unshade selected elements on hover

问题描述

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

I'm trying to make a page inspection tool, where:

• 整个页面都被着色
• 悬停的元素未着色.

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

Unlike a lightbox type app (which is similar), the hovered items should remain in place and (ideally) not be duplicated.

最初，我看着图像灯箱的实现，想到将一个叠加层附加到文档上，然后在悬停时提高元素的z-index.但是，此技术在这种情况下不起作用，因为覆盖层会阻止其他鼠标悬停:

Originally, looking at the image lightbox implementations, I thought of appending an overlay to the document, then raising the z-index of elements upon hover. However this technique does not work in this case, as the overlay blocks additional mouse hovers:

$(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有一个暴露"和遮罩"工具，我已经尝试使用下面的代码:

Alternatively, JQueryTools has an 'expose' and 'mask' tool, which I have tried with the code below:

$(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工具公开或其他技术如何最好地实现此目标的任何想法?谢谢！

Hovering does not work unless I disable the initial page masking. Any thoughts of how best to achieve this, with plain JQuery, JQuery tools expose, or some other technique? Thankyou!

推荐答案

您可以做的是制作一个元素的副本，然后将其插入到叠加层之外的DOM中(具有更高的z-index).为此，您需要计算其位置，但这并不难.

What you can do is make a copy of the element and insert it back into the DOM outside of your overlay (with a higher z-index). You'll need to calculate its position to do so, but that's not too difficult.

这是一个工作示例.

在撰写本文时，我重新了解了不透明度为零的事物无法触发事件的事实.因此，您不能使用.fade()，必须将不透明度专门设置为非零但非常小的数字.

In writing this I re-learned the fact that something with zero opacity cannot trigger an event. Therefore you can't use .fade(), you have to specifically set the opacity to a non-zero but very small number.

$(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)})   
    })  
}

这篇关于对整个页面进行着色，在悬停时对选定的元素进行着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！