add hover class to note list

1 files changed, 6 insertions, 2 deletions

diff --git a/key-picker.mjs b/key-picker.mjs
index c4fe7ce..fe344ae 100644
--- a/key-picker.mjs
+++ b/key-picker.mjs
@@ -12,17 +12,21 @@ function scaleFrom(tonic, scale) {
 }
 
 function handleNoteEnter(e) {
-    const n = Note.fromString(e.target.innerText).toString();
+    const elt = e.target;
+    const n = Note.fromString(elt.innerText).toString();
     // todo: this should be delegated. the key selector shouldn't know
     // about the fretboard at all.
+    elt.classList.add('hover');
     document.querySelectorAll(`#fretboard [x-data-note="${n}"]`).forEach(elt => {
         elt.classList.add('hover');
     })
 }
 
 function handleNoteLeave(e) {
-    const n = Note.fromString(e.target.innerText).toString();
+    const elt = e.target;
+    const n = Note.fromString(elt.innerText).toString();
     // ibid.
+    elt.classList.remove('hover');
     document.querySelectorAll(`#fretboard [x-data-note="${n}"]`).forEach(elt => {
         elt.classList.remove('hover');
     })