整个页面，在hover时取消选定的元素

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

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

与灯箱类型的应用程序（类似）不同，hover的项目应保持在原位并且（理想情况下）不会重复。

最初，在查看图像灯箱实现时，我想到在文档上附加一个叠加层，然后在hover时提高元素的z-index。 但是这种技术在这种情况下不起作用，因为覆盖阻止了额外的鼠标hover：

$(function() { window.alert('started'); $('
').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(); } ); }); 

除非我禁用初始页面屏蔽，否则hover不起作用。 有关如何最好地实现这一点的任何想法，使用简单的JQuery，JQuery工具公开或其他一些技术？ 谢谢！

Answer 1

你可以做的是复制元素并将其插回到覆盖层之外的DOM中（具有更高的z-index）。 你需要计算它的位置，但这并不太难。

这是一个有效的例子 。

在写这篇文章的过程中，我重新学习了一个零不透明度的东西不能触发事件的事实。 因此，您不能使用.fade（），您必须专门将不透明度设置为非零但非常小的数字。

 $(document).ready(function() { init() }) function init() { $('.overlay').show() $('.available').each(function() { var newDiv = $('
').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)}) }) } 

Answer 2

抱歉原型语法，但这可能会给你一个好主意。

 function overlay() { var div = document.createElement('div'); div.setStyle({ position: "absolute", left: "0px", right: "0px", top: "0px", bottom: "0px", backgroundColor: "#000000", opacity: "0.2", zIndex: "20" }) div.setAttribute('id','over'); $('body').insert(div); } $(document).observe('mousemove', function(e) { var left = e.clientX, top = e.clientY, ele = document.elementFromPoint(left,top); //from here you can create that empty div and insert this element in there }) overlay();