1

Is there a simple way to trigger a hover event on all overlapping elements? I'd love to be able to do it with just CSS.

Here is a little example: jsFiddle
Basically I have a few rows of divs which will move with the page when I scroll. Then a single overlapping div with it's position set to fixed. Both sets of divs have a CSS:hover event to change their background color so they get highlighted when I mouseover them.

My goal is to make it so that when I mouse over overlapping it turns red AND whatever sample text div that is behind it turns grey.

The only way I can think of to do this right now is with javascript. And it's inelegant. Basically get the mouse position on the overlapping div, and loop through all the sample text divs to check if their position is under the mouse.

tyler mackenzie
  • 622
  • 7
  • 18
  • by setting the overlapping divs position to fixed you're removing it from the normal flow of the DOM, this makes achieving what you're after with pure CSS pretty much impossible – Pixelomo Nov 08 '17 at 02:02
  • you need javascript to do that – masterpreenz Nov 08 '17 at 02:04
  • Pretty much what I figured. But is it at least possible to have a mouseover event triggered for both elements when they overlap? so that I have just put the listeners on all the elements and have a simple function that changes the color? – tyler mackenzie Nov 08 '17 at 02:05
  • any possibility of screenshot with this current behavior ? – Searching Nov 08 '17 at 02:28
  • 1
    I'm not sure it's possible to easily do what you are wanting. This seems somewhat related to [this question](https://stackoverflow.com/questions/1009753/pass-mouse-events-through-absolutely-positioned-element). – Herohtar Nov 08 '17 at 02:37
  • @Herohtar Yes, I was initially hoping there was a `pointer-events` setting that would do what I want, no such luck. @Searching There is a jsFiddle of my basic setup in my question. – tyler mackenzie Nov 08 '17 at 02:52
  • Not exactly right, sort of a cheat's way which you may or may not be interested in: https://jsfiddle.net/jennift/tk3rm6pe/1/ – Jennift Nov 08 '17 at 03:02
  • @Jennift clever, though it breaks down when you scroll the page. I'd basically needs to reposition the `.overlap` div on the fly, which would be just as complicated (if not more) than using the mouse position to find overlap. – tyler mackenzie Nov 08 '17 at 03:07

0 Answers0