feat: add ruby hover

Erimus-Koo · Sep 24, 2023 · 8d62140 · 8d62140
1 parent ca45a19
commit 8d62140
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/typora-docsify.css b/typora-docsify.css
@@ -509,9 +509,25 @@ body,
   background: var(--color-light);
   color: inherit;
 }
-#write ruby > rt,
-.markdown-section ruby > rt {
+#write ruby,
+.markdown-section ruby {
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: text-decoration-color 0.3s;
+}
+#write ruby rt,
+.markdown-section ruby rt {
   font-size: clamp(10px, 0.5em, 100px) !important;
+  transform-origin: bottom;
+  transition: all 0.3s;
+}
+#write ruby:hover,
+.markdown-section ruby:hover {
+  text-decoration-color: inherit;
+}
+#write ruby:hover rt,
+.markdown-section ruby:hover rt {
+  transform: scale(1.5);
 }
 #write code,
 .markdown-section code,

diff --git a/typora-docsify.less b/typora-docsify.less
@@ -510,8 +510,22 @@ body,
   }
 
   // 音标
-  ruby > rt {
-    font-size: clamp(10px, 0.5em, 100px) !important;
+  ruby {
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    transition: text-decoration-color 0.3s;
+
+    rt {
+      font-size: clamp(10px, 0.5em, 100px) !important;
+      transform-origin: bottom;
+      transition: all 0.3s;
+    }
+    &:hover {
+      text-decoration-color: inherit;
+      rt {
+        transform: scale(1.5);
+      }
+    }
   }
 
   // ============================== 代码 引用