This example demonstrates the edge related virtual DOM events - such as mouseEnterLeft, mouseEnterBottom, mouseExitTop, mouseExitRight, etc. - that are available in the Uize.Dom.VirtualEvents.Edge module.

Each of the squares below is wired up with handlers for enter and exit events for all of their edges. The enter events are wired to fade the color of the border at which the mouse enters a square from orange to black. The exit events are wired to fade the color of the border at which the mouse exits a square from cyan to black. The animation of the border color is done using the Uize.Fx.fadeStyle method of the Uize.Fx module. Move your mouse around the squares and see how the various edges light up in response to executing the handlers for the edge virtual DOM events that are wired up. All of the enter and exit events for all edges are wired up for all the squares - in a single statement - by using the Uize.Dom.Basics.find method of the Uize.Dom.Basics module to obtain a list of the nodes with the value "testNode" for their class attribute.