notes: raise notes on hover.

* Raise notes when hovering over them. This is so that when dragging
  embedded notes, they're not hidden behind other notes. Also so that if
  two notes are overlapping, you can hover over one to raise it over the
  other.

* Replace .hovering class with :hover selector.

app/javascript/src/javascripts/notes.js

@@ -86,12 +86,10 @@ class Note {
 
     on_mouseenter() {
       this.note.body.show();
-      this.$note_box.addClass("hovering");
     }
 
     on_mouseleave() {
       this.note.body.hide();
-      this.$note_box.removeClass("hovering");
     }
 
     on_dragstart() {

app/javascript/src/styles/specific/notes.scss

@@ -95,6 +95,11 @@
     opacity: 0.5;
     z-index: 100;
 
+    /* Raise notes on hover so overlapping embedded notes are readable. */
+    &:hover {
+      z-index: 200;
+    }
+
     &.unsaved {
       border: var(--unsaved-note-box-border);
     }
@@ -108,7 +113,7 @@
       border: 1px solid transparent;
       opacity: 1;
 
-      &.hovering {
+      &:hover {
         border: var(--note-box-border);
         box-shadow: var(--note-box-shadow);
 
@@ -132,7 +137,7 @@
         border: var(--movable-note-box-border);
       }
 
-      &:not(.hovering) div.ui-resizable-handle {
+      &:not(:hover) div.ui-resizable-handle {
         display: none !important;
       }
     }