Question

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

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

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

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

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

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();

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

2 个答案: