如何在给定点直接或通过另一个元素的空腔检测哪个元素可见/在顶部？

Question

假设我有一个div（背景设置为蓝色），并且在其中，有一个<h1>包含一些白色文本。

使用javascript函数elementFromPoint()，我可以找到当前处于给定坐标（x，y）的元素，但此函数仅检查边界，而不是实际可见性。例如如果<h1>包含文本"HELLO"，那么从“O”内部，背景（蓝色）div实际上是可见的，但elementFromPoint()函数仍会检测到<h1>标记那里，因为它只检查<h1>的边界框。

是否有任何javascript函数/库用于检测实际可见对象？ （请参阅下面的图片，了解我面临的问题）

Answer 1

使用visible selector：

$(selector).is(':visible');

---

你有这样的HTML：

<div><h1></h1></div>

因此，将隐藏的可见性应用于div仍会显示h1标记。 demo

如果将display none应用于div，则隐藏h1标记。 demo

---

因此，您可能拥有可见性属性而不是显示。因此，使用display: none;

进行更改