change the hover method

dealfonso · Jun 16, 2023 · 187a343 · 187a343
1 parent 87044a3
commit 187a343
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 28 deletions.
diff --git a/js/simplelottieplayer.js b/js/simplelottieplayer.js
@@ -180,21 +180,6 @@ class SimpleLottiePlayer {
         }
 
         if (this.options.fullsizeButton) {
-            let stylesheet = document.styleSheets[0];
-            let found = false;
-            for (let selector in [...stylesheet.cssRules]) {
-                if (selector.selectorText === `.${this._id}`) {
-                    found = true;
-                    break;
-                }
-            }
-
-            if (!found) {
-                // Add the rules (the placeholder and the hover); we want a hover effect in this case, so we need to use this mechanism (which I don't like very much)
-                document.styleSheets[0].insertRule(`.${this._id} {}`);
-                document.styleSheets[0].insertRule(`.${this._id}-btn:hover { opacity: 1 !important; }`)
-            }
-
             let fullScreenBtn = document.createElement("div");
             fullScreenBtn.classList.add(`${this._id}-btn`);
             if (this.options.cssClassFullsizeButton !== null) {
@@ -249,6 +234,18 @@ class SimpleLottiePlayer {
                 fullScreenBtn.style.display = "flex";
                 event.stopImmediatePropagation();
             });
+            fullScreenBtn.addEventListener('mouseover', function(event) {
+                fullScreenBtn.style.opacity = "1";
+            });
+            fullScreenBtn.addEventListener('mouseout', function(event) {
+                fullScreenBtn.style.opacity = "0.5";
+            });
+            exitFullScreenBtn.addEventListener('mouseover', function(event) {
+                exitFullScreenBtn.style.opacity = "1";
+            });
+            exitFullScreenBtn.addEventListener('mouseout', function(event) {
+                exitFullScreenBtn.style.opacity = "0.5";
+            });
         }
 
         if (this.options.controlButtons) {

diff --git a/simplelottieplayer.js b/simplelottieplayer.js
@@ -293,18 +293,6 @@ class SimpleLottiePlayer {
             this._buttonEventHandler = null;
         }
         if (this.options.fullsizeButton) {
-            let stylesheet = document.styleSheets[0];
-            let found = false;
-            for (let selector in [ ...stylesheet.cssRules ]) {
-                if (selector.selectorText === `.${this._id}`) {
-                    found = true;
-                    break;
-                }
-            }
-            if (!found) {
-                document.styleSheets[0].insertRule(`.${this._id} {}`);
-                document.styleSheets[0].insertRule(`.${this._id}-btn:hover { opacity: 1 !important; }`);
-            }
             let fullScreenBtn = document.createElement("div");
             fullScreenBtn.classList.add(`${this._id}-btn`);
             if (this.options.cssClassFullsizeButton !== null) {
@@ -363,6 +351,18 @@ class SimpleLottiePlayer {
                 fullScreenBtn.style.display = "flex";
                 event.stopImmediatePropagation();
             });
+            fullScreenBtn.addEventListener("mouseover", function(event) {
+                fullScreenBtn.style.opacity = "1";
+            });
+            fullScreenBtn.addEventListener("mouseout", function(event) {
+                fullScreenBtn.style.opacity = "0.5";
+            });
+            exitFullScreenBtn.addEventListener("mouseover", function(event) {
+                exitFullScreenBtn.style.opacity = "1";
+            });
+            exitFullScreenBtn.addEventListener("mouseout", function(event) {
+                exitFullScreenBtn.style.opacity = "0.5";
+            });
         }
         if (this.options.controlButtons) {
             let playBtn = document.createElement("div");