Question

是否可以拥有一个可见的html元素，但是在页面上缺少一个？

让我举个例子来说明我的意思。可以说我有一个图片库和一个灯箱。通常灯箱会使背景变灰，因此您可以将焦点对准图像。我想要的只是灰色的叠加，但我不希望它是互动的。所以如果你点击它，你会点击它背后的元素。所以，假设我有一个段落，在该段落中我有一个链接，覆盖该段落是50％不透明度的叠加层，如果我将鼠标悬停在链接上，链接会对叠加层做出反应不在那里。

我希望我已经解释得这么好了

AFAIK没有简单的方法可以做到这一点，唯一的选择就是获得鼠标坐标并以某种方式转发它们：/无论如何我想要的是什么？

由于

Answer 1

这可以在某些浏览器中使用pointer-events: none完成，但遗憾的是不是任何版本的IE。

Answer 2

在你想要的意义上，覆盖层是不可能是透明的。你可以尝试做的是相反的;将“叠加层”置于后面的页面的其余部分，然后将整个页面的不透明度更改为50％。在视觉上这不会有任何区别，但它会消除JS点击的气泡效果。

Answer 3

您可以使用CSS从文档流中取出一个元素，但是当发生这种情况时，只要它可见，该元素仍然会收到点击事件。

您可以将点击事件附加到叠加层，然后使用鼠标坐标document.elementFromPoint或手动循环浏览您想要交互的所有元素并检查页面上的坐标。这种方法的问题在于NoScript或许多其他产品might detect this as ClickJacking，即使您将其用于良性目的，它本质上也是如此。

Answer 4

我不明白为什么这是不可能的。 opacity是跨浏览器的大约5个css属性。我不确定你的重叠是什么意思（与图层或z-index相同？）或者你在谈论使用CSS的可能性

对于所有p标签，然后它是p：悬停在css中，但是对于特定的p标签，则使用#id with：hover伪类，如下所示：

#myptag:hover {
    background-color: #f3c9d5;
    background-image:url(/images/mybgimg.jpg);
    color:blue;
    cursor:pointer;
}

表示不透明度，请使用windows.index中0到100之间的数字：

//this function modifies the opacity of an element at a 
//specific id like el1 or el2 using imageNumber as the index.
//you also specify an opacityInteger, which is an non-negative 
//integer number in the range 0..100
//works on chrome, safari, ie, and firefox, all the major browsers.
function processimage(imageNumber, opacityInteger) {
    var opacityFloat=opacityInteger/100.0;
    //set image style, if we can - I hear it's readonly...
    //filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0
    document.getElementById("el"+imageNumber).style.filter="alpha(opacity="+opacityInteger+")";
    document.getElementById("el"+imageNumber).style.mozOpacity=opacityFloat.toString();
    document.getElementById("el"+imageNumber).style.opacity=opacityFloat.toString();
}

嗯，我刚刚意识到这只是勉强有用。虽然它可能会让你朝着你的目标前进，但你仍然需要设置一个css z-index：1;在layerto得到一个实际的叠加。我刚给你的是一个UNDERLAY或者只是将给定的p标签的颜色或背景图像设置为另一个东西。我不知道你是否愿意。我发现叠加层非常难以管理，因为页面布局引擎将所有层视为相同的层标签 - 流向，并且必须使用绝对定位强制它们粘在您想要的位置in。加上它会使用图层弄乱主页。

没有“存在”的HTML / CSS / JS可见元素

4 个答案: