Accepted answer

One good example that I can think of is used by Node-RED to draw their flow diagrams...

Create multiple network links between each pair of nodes -- the first would be a transparent "background" link with a "wide" stroke (e.g. 20px). Then draw the visible link directly on top of it, but use css to set pointer-events: none;. This enables the mouse enter/exit/hover events to be detected over the wider background lines, whenever the pointer is "near" the visible link.

enter image description here

Their technique also uses a third "outline" link in white that is 1 px wider than the visible link (between the background and foreground links). This helps to provide a half pixel of separation between the visible links in areas where there are lots of overlapping lines...

Related Query

More Query from same tag