From 5139aa01973a605994a19dde19dd695af74aec57 Mon Sep 17 00:00:00 2001
From: Nwamini Emmanuel Onyedikachi <emmanuelgodwin558@gmail.com>
Date: Mon, 30 Oct 2023 06:35:38 +0100
Subject: [PATCH] Update app.js

Converted the code for this hover feature from jQuery into JavaScript.
---
 app.js | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/app.js b/app.js
index 97c1b943..41097849 100644
--- a/app.js
+++ b/app.js
@@ -115,15 +115,31 @@ $(document).ready(function() {
   });
 
   // Display a hint (type ie tv, movie or musical) when hovering over the question mark.
-  $("#emojis").on("mouseover", ".hint-container", function () {
-    $(this).find(".hint").addClass("hint-reveal");
-  });
+  // $("#emojis").on("mouseover", ".hint-container", function () {
+  //   $(this).find(".hint").addClass("hint-reveal");
+  // });
+
+  // // Hide hint (type ie tv, movie or musical) when the user stops hovering over the question mark.
+  // $("#emojis").on("mouseleave", ".hint-container", function () {
+  //   $(this).find(".hint").removeClass("hint-reveal");
+  // });
 
-  // Hide hint (type ie tv, movie or musical) when the user stops hovering over the question mark.
-  $("#emojis").on("mouseleave", ".hint-container", function () {
-    $(this).find(".hint").removeClass("hint-reveal");
-  });
 
+  // Display a hint (type ie tv, movie or musical) when hovering over the question mark.
+document.querySelector("#emojis").addEventListener("mouseover", function (event) {
+  if (event.target && event.target.classList.contains("hint-container")) {
+    event.target.querySelector(".hint").classList.add("hint-reveal");
+  }
+});
+
+// Hide hint (type ie tv, movie or musical) when the user stops hovering over the question mark.
+document.querySelector("#emojis").addEventListener("mouseleave", function (event) {
+  if (event.target && event.target.classList.contains("hint-container")) {
+    event.target.querySelector(".hint").classList.remove("hint-reveal");
+  }
+});
+
+  
   // Toggle to expand or hide all of the movie/show names by clicking an icon
   $(".btn-reveal-all").click(function () {
     $(this).toggleClass(["revealed"]);