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

Author: William Troup

dist/select.js.css

@@ -82,14 +82,14 @@ div.select-js div.drop-down {
 div.select-js div.drop-down div.item {
   padding: var(--select-js-spacing);
   border-bottom: var(--select-js-border-size) var(--select-js-color-black) dotted;
+  transition: var(--select-js-transition);
 }
 div.select-js div.drop-down div.item:last-child {
   border-bottom: none;
 }
 div.select-js div.drop-down div.item:hover {
   cursor: pointer;
   background-color: var(--select-js-color-light-gray);
-  transition: var(--select-js-transition);
 }
 div.select-js div.drop-down div.selected {
   color: var(--select-js-color-gray);
@@ -113,16 +113,15 @@ div.select-js div.control div.button {
   right: 14px;
   top: 14px;
   transform: rotate(45deg);
+  transition: var(--select-js-transition);
 }
 div.select-js div.control div.button:hover {
   cursor: pointer;
   opacity: 0.7;
-  transition: var(--select-js-transition);
 }
 div.select-js div.control div.button:active {
   cursor: pointer;
   opacity: 0.5;
-  transition: var(--select-js-transition);
 }
 div.select-js div.control div.button-open {
   transform: rotate(-135deg);
@@ -146,11 +145,11 @@ div.select-js div.control div.selected-item div.remove {
   margin-left: var(--select-js-spacing);
   display: inline-block;
   font-weight: bold;
+  transition: var(--select-js-transition);
 }
 div.select-js div.control div.selected-item div.remove:hover {
   cursor: pointer;
   opacity: 0.7;
-  transition: var(--select-js-transition);
 }
 div.select-js div.control div.no-items-selected {
   background-color: var(--select-js-color-light-gray);

dist/select.js.css.map

@@ -8,6 +8,7 @@
 
 #### **CSS:**
 - Added a new ":root" variable called "--select-js-default-font".
+- All hover transition effects now work for hovering, and not hovering, which results in a smoother display.
 
 #### **Documentation:**
 - Added install instructions into the main README files.

dist/select.js.min.css

@@ -99,6 +99,7 @@ div.select-js {
         div.item {
             padding: var(--select-js-spacing);
             border-bottom: var(--select-js-border-size) var(--select-js-color-black) dotted;
+            transition: var( --select-js-transition );
 
             &:last-child {
                 border-bottom: none;
@@ -107,7 +108,6 @@ div.select-js {
             &:hover {
                 cursor: pointer;
                 background-color: var(--select-js-color-light-gray);
-                transition: var( --select-js-transition );
             }
         }
 
@@ -138,17 +138,16 @@ div.select-js {
             right: 14px;
             top: 14px;
             transform: rotate(45deg);
+            transition: var(--select-js-transition);
 
             &:hover {
                 cursor: pointer;
                 opacity: 0.7;
-                transition: var(--select-js-transition);
             }
 
             &:active {
                 cursor: pointer;
                 opacity: 0.5;
-                transition: var(--select-js-transition);
             }
         }
 
@@ -177,11 +176,11 @@ div.select-js {
                 margin-left: var(--select-js-spacing);
                 display: inline-block;
                 font-weight: bold;
+                transition: var(--select-js-transition);
 
                 &:hover {
                     cursor: pointer;
                     opacity: 0.7;
-                    transition: var(--select-js-transition);
                 }
             }
         }