All hover transition effects now work for hovering, and not hovering, which results in a smoother display.

Author: William Troup

dist/syntax.js.css

@@ -104,14 +104,14 @@ div.syntax-highlight div.code div.tabs button.tab {
   background-color: var(--syntax-js-tab-background-color);
   color: var(--syntax-js-tab-text-color);
   border: var(--syntax-js-border-size) solid var(--syntax-js-tab-border-color);
+  transition: var(--syntax-js-transition);
 }
 code.syntax-highlight div.code div.tabs button.tab:hover,
 div.syntax-highlight div.code div.tabs button.tab:hover {
   cursor: pointer;
   background-color: var(--syntax-js-tab-hover-background-color);
   color: var(--syntax-js-tab-hover-text-color);
   border: var(--syntax-js-border-size) solid var(--syntax-js-tab-hover-border-color);
-  transition: var(--syntax-js-transition);
 }
 code.syntax-highlight div.code div.tabs button.tab-active,
 div.syntax-highlight div.code div.tabs button.tab-active {
@@ -239,6 +239,10 @@ div.syntax-highlight div.code div.tab-contents div.syntax div.buttons div.langua
   border-top-right-radius: var(--syntax-js-border-radius);
   border-right: none;
 }
+code.syntax-highlight div.code div.tab-contents div.syntax div.buttons button.button,
+div.syntax-highlight div.code div.tab-contents div.syntax div.buttons button.button {
+  transition: var(--syntax-js-transition);
+}
 code.syntax-highlight div.code div.tab-contents div.syntax div.buttons button.button-opener,
 div.syntax-highlight div.code div.tab-contents div.syntax div.buttons button.button-opener {
   font-weight: 900 !important;
@@ -255,7 +259,6 @@ div.syntax-highlight div.code div.tab-contents div.syntax div.buttons button.but
   cursor: pointer;
   background-color: var(--syntax-js-button-hover-background-color);
   color: var(--syntax-js-button-hover-text-color);
-  transition: var(--syntax-js-transition);
 }
 code.syntax-highlight div.code div.tab-contents div.syntax p,
 div.syntax-highlight div.code div.tab-contents div.syntax p {
@@ -276,12 +279,17 @@ div.syntax-highlight div.code div.tab-contents div.syntax p span.keyword-clickab
   font-weight: 700;
   color: var(--syntax-js-color-keyword);
 }
+code.syntax-highlight div.code div.tab-contents div.syntax p span.keyword-clickable,
+code.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-keyword-clickable,
+div.syntax-highlight div.code div.tab-contents div.syntax p span.keyword-clickable,
+div.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-keyword-clickable {
+  transition: var(--syntax-js-transition);
+}
 code.syntax-highlight div.code div.tab-contents div.syntax p span.keyword-clickable:hover,
 code.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-keyword-clickable:hover,
 div.syntax-highlight div.code div.tab-contents div.syntax p span.keyword-clickable:hover,
 div.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-keyword-clickable:hover {
   color: var(--syntax-js-color-keyword-hover);
-  transition: var(--syntax-js-transition);
   cursor: pointer;
 }
 code.syntax-highlight div.code div.tab-contents div.syntax p span.value,
@@ -291,12 +299,17 @@ div.syntax-highlight div.code div.tab-contents div.syntax p span.value-clickable
   font-weight: 700;
   color: var(--syntax-js-color-value);
 }
+code.syntax-highlight div.code div.tab-contents div.syntax p span.value-clickable,
+code.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-value-clickable,
+div.syntax-highlight div.code div.tab-contents div.syntax p span.value-clickable,
+div.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-value-clickable {
+  transition: var(--syntax-js-transition);
+}
 code.syntax-highlight div.code div.tab-contents div.syntax p span.value-clickable:hover,
 code.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-value-clickable:hover,
 div.syntax-highlight div.code div.tab-contents div.syntax p span.value-clickable:hover,
 div.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-value-clickable:hover {
   color: var(--syntax-js-color-value-hover);
-  transition: var(--syntax-js-transition);
   cursor: pointer;
 }
 code.syntax-highlight div.code div.tab-contents div.syntax p span.attribute,
@@ -306,12 +319,17 @@ div.syntax-highlight div.code div.tab-contents div.syntax p span.attribute-click
   font-weight: 700;
   color: var(--syntax-js-color-attribute);
 }
+code.syntax-highlight div.code div.tab-contents div.syntax p span.attribute-clickable,
+code.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-attribute-clickable,
+div.syntax-highlight div.code div.tab-contents div.syntax p span.attribute-clickable,
+div.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-attribute-clickable {
+  transition: var(--syntax-js-transition);
+}
 code.syntax-highlight div.code div.tab-contents div.syntax p span.attribute-clickable:hover,
 code.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-attribute-clickable:hover,
 div.syntax-highlight div.code div.tab-contents div.syntax p span.attribute-clickable:hover,
 div.syntax-highlight div.code div.tab-contents div.syntax p span.no-highlight-attribute-clickable:hover {
   color: var(--syntax-js-color-attribute-hover);
-  transition: var(--syntax-js-transition);
   cursor: pointer;
 }
 code.syntax-highlight div.code div.tab-contents div.syntax p span.comment,