Fix hover and click interactions for aligned equations

Fixed two critical issues with interactive terms in equations using \begin{aligned}:

1. Click handling for duplicate terms: Changed clicked state tracking from
   termClass to actual element reference, so clicking different occurrences
   of the same term (e.g., multiple instances of "divergence" in Maxwell)
   works correctly instead of toggling off.

2. Hover events blocked by KaTeX structure: KaTeX's alignment elements
   (.vlist, .mtable, etc.) were overlaying term elements with
   pointer-events:auto, blocking mouse events. Solution: Set pointer-events:none
   on all KaTeX structural elements while keeping pointer-events:auto on term
   elements to ensure they receive hover/click events.

Also added z-index stacking context to prevent description overlay.

All equations including Maxwell's 4th line now fully interactive.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: stared

src/main.ts

@@ -90,6 +90,18 @@ function renderEquation() {
     trust: true, // Enable \htmlClass
     throwOnError: false,
   });
+
+  // Set pointer-events: none on KaTeX structural elements so they don't block term hover
+  // But keep term elements interactive
+  equationContainer.querySelectorAll('.katex *').forEach((el) => {
+    const classList = (el as HTMLElement).classList;
+    const hasTermClass = Array.from(classList).some(c => c.startsWith('term-'));
+    if (hasTermClass) {
+      (el as HTMLElement).style.pointerEvents = 'auto';
+    } else {
+      (el as HTMLElement).style.pointerEvents = 'none';
+    }
+  });
 }
 
 function renderDescription() {
@@ -103,7 +115,7 @@ function setupHoverEffects() {
   const hoverDiv = document.getElementById('hover-explanation');
   if (!hoverDiv || !parsedContent) return;
 
-  let clicked: { termClass: string; definition: string } | null = null;
+  let clicked: { element: HTMLElement; termClass: string; definition: string } | null = null;
 
   const updateTerms = (termClass: string, classList: string, action: 'add' | 'remove') => {
     document.querySelectorAll(`.${termClass}`).forEach((el) => el.classList[action](classList));
@@ -124,14 +136,14 @@ function setupHoverEffects() {
     (element as HTMLElement).style.cursor = 'pointer';
 
     element.addEventListener('click', () => {
-      if (clicked?.termClass === termClass) {
+      if (clicked?.element === element) {
         updateTerms(termClass, 'term-clicked', 'remove');
         clicked = null;
         hoverDiv.classList.remove('visible');
       } else {
         if (clicked) updateTerms(clicked.termClass, 'term-clicked', 'remove');
         updateTerms(termClass, 'term-clicked', 'add');
-        clicked = { termClass, definition };
+        clicked = { element: element as HTMLElement, termClass, definition };
         showDefinition(definition);
       }
     });

src/style.css

@@ -43,6 +43,8 @@ h1 {
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
+  z-index: 10;
 }
 
 #equation-container .katex {
@@ -54,6 +56,11 @@ h1 {
   transition: opacity 0.2s ease;
 }
 
+/* Ensure child elements don't block hover events */
+[class*="term-"] * {
+  pointer-events: none !important;
+}
+
 /* Hover effects - generic for all term classes */
 [class*="term-"]:hover,
 .term-active {
@@ -120,6 +127,8 @@ h1 {
   margin-bottom: 1rem;
   font-size: 1rem;
   line-height: 1.6;
+  position: relative;
+  z-index: 1;
 }
 
 .static-description p {