add explanation on hover

2 files changed, 14 insertions, 1 deletions

diff --git a/html/style.css b/html/style.css
index 7bf54c7..e312f06 100644
--- a/html/style.css
+++ b/html/style.css
@@ -30,3 +30,16 @@ td {
 .ja:hover .char_bad {
     color: grey;
 }
+
+.en {
+    text-align: center;
+    font-size: 1.2em;
+}
+
+.en .expl {
+    color: transparent;
+}
+
+.en:hover .expl {
+    color: black;
+}
diff --git a/src/main.rs b/src/main.rs
index 60c1ded..6f5ca4e 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -323,7 +323,7 @@ fn format_batch_aux(count: usize, i: usize, batch: &Batch) -> Result<()> {
             }
         }
         writeln!(f, "</p>")?;
-        writeln!(f, r#"<p style="text-align: center; font-size: 1.2em">{}</p>"#, ex.en)?;
+        writeln!(f, r#"<p class="en"><span class="expl">{}</span><br />{} </p>"#, ex.expl, ex.en)?;
     }
 
     write!(f, "</body></html>")?;