Is it possible to identify the exact point where two elements overlap?
Take a look at the code snippet below that demonstrates what I mean:
<html>
<head>
<style>
body {
height: 100%;
margin: 0;
padding: 0;
}
.s1, .s2 {
height: 100%;
}
.s1 {
display: flex;
justify-content: center;
align-items: center;
}
.s2 {
background-color: aquamarine;
}
.s1 p {
position: fixed;
}
</style>
</head>
<body>
<div class="s1">
<p class="p">TEST</p>
</div>
<div class="s2">
</div>
</body>
</html>This code is quite simple with just two <div> elements and one <p> tag.
I applied the style position: fixed to the <p> tag to keep it centered on the screen at all times.
Now, my question arises.
Is there a method to detect when the <p> tag and .s2 element intersect?
If the <p> overlaps with the .s2, I would like to change its color.
https://i.sstatic.net/csvqA.png
(I am referring to this specific intersection point)
Any solutions or suggestions?
I prefer a solution using pure HTML/CSS/JS, but I am open to using libraries if they offer relevant functionality.
Thank you!