Added new sound in mouseover elements in HTML guide

argenisosorio · May 29, 2024 · d25fa24 · d25fa24
1 parent f3423c0
commit d25fa24
Showing 1 changed file with 35 additions and 0 deletions.
diff --git a/html.txt b/html.txt
@@ -4790,3 +4790,38 @@ Fuente
 ======
 
 ChatGPT
+
+==============================================
+Reproducir sonido mp3 con hover sibre span tag
+==============================================
+
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reproducir Sonido al Hacer Hover</title>
+    <style>
+        #hover-span {
+            display: inline-block;
+            padding: 10px;
+            background-color: #f0f0f0;
+            border: 1px solid #ccc;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <span id="hover-span">Pasa el mouse por aquí</span>
+
+    <audio id="hover-sound" src="click-sound.mp3"></audio>
+
+    <script>
+        document.getElementById('hover-span').addEventListener('mouseover', function() {
+            var audio = document.getElementById('hover-sound');
+            audio.play();
+        });
+    </script>
+</body>
+</html>
+