Use proper way of detecting when a user hovers for games/installs page

src/app/Installs.css

@@ -11,3 +11,13 @@
 .downloads-entry {
   @apply flex justify-between items-center m-2 p-2 rounded-lg text-gray-200 text-lg transition-colors bg-(--col2) hover:bg-(--col3) border border-(--col4) hover:border-(--col5);
 }
+
+.downloads-entry .entry-info-item,
+.downloads-entry .button {
+  @apply bg-(--col3) border-(--col5) hover:bg-(--col5) hover:border-(--col7) disabled:text-gray-300 disabled:bg-(--col2) disabled:border-(--col6) disabled:hover:text-gray-100 disabled:hover:bg-(--col3) disabled:hover:border-(--col7);
+}
+
+.downloads-entry:hover .entry-info-item,
+.downloads-entry:hover .button {
+  @apply bg-(--col4) border-(--col6) hover:bg-(--col6) hover:border-(--col8) disabled:text-gray-300 disabled:bg-(--col2) disabled:border-(--col7) disabled:hover:text-gray-100 disabled:hover:bg-(--col4) disabled:hover:border-(--col8);
+}

src/app/game/page.tsx

@@ -24,7 +24,6 @@ export default function Installs () {
   } = useGlobal()
 
   const params = useSearchParams()
-  const [hoveredIds, setHoveredIds] = useState<string[]>([])
 
   useEffect(() => {
     if (!showPopup) return
@@ -106,10 +105,6 @@ export default function Installs () {
                     setShowPopup(true)
                     setFadeOut(false)
                   }}
-                  onMouseEnter={() => setHoveredIds(prev => [...prev, entry])}
-                  onMouseLeave={() =>
-                    setHoveredIds(prev => prev.filter(i => i !== i))
-                  }
                 >
                   <div className='h-18 w-screen relative'>
                     <p className='text-2xl'>
@@ -118,9 +113,7 @@ export default function Installs () {
                     </p>
 
                     <div
-                      className={`entry-info-item absolute left-0 bottom-0 ${
+                      className='entry-info-item absolute left-0 bottom-0'
-                        hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
-                      }`}
                       title='The date the game was installed in MM/dd/yyyy format'
                     >
                       <p>
@@ -134,9 +127,7 @@ export default function Installs () {
 
                     <div className='flex gap-2 absolute right-0 bottom-0'>
                       <button
-                        className={`button ${
+                        className='button'
-                          hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
-                        }`}
                         onClick={e => {
                           e.stopPropagation()
                           setManagingVersion(entry)
@@ -149,9 +140,7 @@ export default function Installs () {
                         View Info
                       </button>
                       <button
-                        className={`button ${
+                        className='button'
-                          hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
-                        }`}
                         hidden={
                           !normalConfig?.settings.useLegacyInteractButtons
                         }
@@ -167,9 +156,7 @@ export default function Installs () {
                         Manage
                       </button>
                       <button
-                        className={`button ${
+                        className='button'
-                          hoveredIds.includes(entry) ? 'btntheme3' : 'btntheme2'
-                        }`}
                         onClick={e => {
                           e.stopPropagation()
                           const verInfo = getVersionInfo(entry)

src/app/page.tsx

@@ -28,7 +28,6 @@ export default function Installs () {
   } = useGlobal()
 
   const router = useRouter()
-  const [hoveredIds, setHoveredIds] = useState<number[]>([])
 
   useEffect(() => {
     if (!showPopup) return
@@ -82,19 +81,13 @@ export default function Installs () {
                     if (normalConfig?.settings.useLegacyInteractButtons) return
                     router.push('/game?id=' + i.id)
                   }}
-                  onMouseEnter={() => setHoveredIds(prev => [...prev, i.id])}
-                  onMouseLeave={() =>
-                    setHoveredIds(prev => prev.filter(e => e !== i.id))
-                  }
                 >
                   <div className='h-18 w-screen relative'>
                     <p className='text-2xl'>{i.name}</p>
 
                     <div className='flex gap-2 absolute left-0 bottom-0'>
                       <div
-                        className={`entry-info-item ${
+                        className='entry-info-item'
-                          hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
-                        }`}
                         title='The amount of versions installed of this game in installed/installable format.'
                       >
                         <p>
@@ -107,9 +100,7 @@ export default function Installs () {
                         </p>
                       </div>
                       <div
-                        className={`entry-info-item ${
+                        className='entry-info-item'
-                          hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
-                        }`}
                         hidden={!i.official}
                         title='This game is official.'
                       >
@@ -117,9 +108,7 @@ export default function Installs () {
                         <p>Official</p>
                       </div>
                       <div
-                        className={`entry-info-item ${
+                        className='entry-info-item'
-                          hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
-                        }`}
                         hidden={i.official}
                         title={
                           i.verified
@@ -136,9 +125,7 @@ export default function Installs () {
                     </div>
 
                     <Link
-                      className={`button absolute right-0 bottom-0 ${
+                      className='button absolute right-0 bottom-0'
-                        hoveredIds.includes(i.id) ? 'btntheme3' : 'btntheme2'
-                      }`}
                       href={'/game?id=' + i.id}
                       hidden={!normalConfig?.settings.useLegacyInteractButtons}
                       title='Click to view game installs'