onMouse{Over,Out,Enter,Leave} docs

[Janiczek]

Follow-up from #166.

After mulling it over for a while and reading up other sources (this was a great one) on the matter, I'd say this in the docs:

---

onMouseEnter : msg -> Attribute msg

The onMouseEnter and onMouseLeave events:

• do not bubble from children to parent elements
• assume the mouse can be inside multiple elements at once (mouseleave triggers when exiting the element, not when entering another that overlaps with it)

onMouseLeave : msg -> Attribute msg

onMouseOver : msg -> Attribute msg

The onMouseOver and onMouseOut events:

• do bubble from children to parent elements
• assume the mouse can only be inside one element at one time (mouseout triggers both when exiting an element and when entering another that overlaps with it)

Because of the bubbling it might be a good idea to use onMouseOver and onMouseOut events with the stopPropagation option set to True. Try the various options to see which one fits your particular usecase!

onMouseOut : msg -> Attribute msg

---

[Janiczek]

This is a bit of documentation I've wrote in my code; might be helpful wrt. different wording etc.

{- Difference between mouseEnter/Leave and mouseOver/Out:

   Imagine you have <div#outer> <div#inner></div#inner> </div#outer>:
    ------------
   |  OUTER     |
   |   -------  |
   |  | INNER | |
   |   -------  |
    ------------

   Then this is what happens when you go fully outside -> fully inside -> back fully outside.

    --------------------------------------------------------
   | action            | mouseEnter/Leave | mouseOver/Out   |
   |-------------------+------------------+-----------------|
   | 1. hover #outer   | mouseEnter Outer | mouseOver Outer |
   |-------------------+------------------+-----------------|
   | 2. hover #inner   | mouseEnter Inner | mouseOut Outer  |
   |                   |                  | mouseOver Inner |
   |-------------------+------------------+-----------------|
   | 3. back to #outer | mouseLeave Inner | mouseOut Inner  |
   |                   |                  | mouseOver Outer |
   |-------------------+------------------+-----------------|
   | 4. outside both   | mouseLeave Outer | mouseOut Outer  |
    -------------------------------------------------------- 

   That is, mouseOver/Out keep track of the topmost element you're hovering.
   MouseEnter/Leave keep track of all of them.
   
-}

[Saumya29]

@Janiczek I would like to take it up. Would be great if you could guide me on how to go about it.

[Janiczek]

@Saumya29 I believe this waits on some feedback from @evancz. But you probably can make a PR that adds that doc comment here: https://github.com/elm/html/blob/1.0.0/src/Html/Events.elm#L22

ie. something like

{-|
# Mouse clicks
@docs onClick, onDoubleClick,
      onMouseDown, onMouseUp,

# Mouse hover

Note on the difference between mouseEnter/Leave and mouseOver/Out: ...SNIP...

@docs onMouseEnter, onMouseLeave,
      onMouseOver, onMouseOut
-}