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

Question

Suppose I have a div (background set to blue), and inside it, there is a <h1> containing some text in white.

Using the javascript function elementFromPoint() , I can find which element is currently at a given coordinate(x,y), but this function only checks the bounds, and not actual visibility. eg if <h1> contains the text "HELLO" , then from inside the "O", the background (blue) div is actually visible, but the elementFromPoint() function still detects the <h1> tag there, because it only checks the bounding-box of the <h1> .

Is there any javascript function/library using which I can detect the actually visible object at a point? (See the picture below for the problem I'm facing)

Answer 1

Use visible selector :

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

---

You have html like this:

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

So, applying visibility hidden to div it still shows the h1 tag. demo

And if you apply display none to div then h1 tag is hidden. demo

---

So, you might be having visibility property instead of display. Thus change it with display: none;