Dynamically changing box shadow in accord to mouse movement is quite fun to me.
If you add event listener that listens to
mousemove event to
block-level element that
wraps another block-level element (
div that consists of
article for example),
the target element it listens to (
event.target) sometime confuses us. We expect
the coordinate of mouse movement be relative to parent element,
but when we hover over the upper right corner of its child element, the mouse coordinate
event.offsetY) turn to
(0, 0). That’s strange.
To fix this problem, we have to adjust the child element’s coordinate by adding the gap width between parent and child element to the current coordinate. It’s not that fancy, not as fancy as メリー メディオーアティ’s teaching method.
Here’s how it’s done.
As usual, I will explain the snippet above incrementally but thoroughly. Here’s the demo.