Tengo una aplicación de demostración en la que quiero mostrar el icono Reproducir y pausar. Puedo hacer un icono Reproducir y pausar. Pero hay otro requisito que necesito para mostrar PLAY y PAUSE TEXT al pasar el mouse sobre
Me enfrento a dos problemas.
Aquí está mi código https://jsbin.com/qifigeruti/3/edit?html,css,js,output
.container { padding: 8px; border: 1px solid; display: inline-block; } .text { display: none; } .button { border: 0; background: transparent; box-sizing: border-box; width: 0; height: 20px; border-color: transparent transparent transparent #202020; transition: 100ms all ease; cursor: pointer; border-style: solid; border-width: 10px 0 10px 20px; padding: 0 } .button.paused { border-style: double; border-width: 0px 0 0px 20px; } .button:hover { border-color: transparent transparent transparent #404040; } .button:hover span { display: inline; } <div class="container"> <button class='button'> <span class="text">Play</span> </button> </div>Para alternar el ícono o el texto al pasar el mouse. Sugiero usar la biblioteca Font Awesome.
En lugar de las imágenes .png porque usa un nombre de clase para poner un ícono, y eso facilita cambiar el ícono usando jquery.
Puede usar jquery ( .hover ) https://api.jquery.com/hover/
En la función ( .hover ) puede verificar si div tiene una clase https://api.jquery.com/hasclass/
Luego puede eliminar una clase https://api.jquery.com/removeclass/ y agregar otra.
Si usa Font Awesome, una vez que cambie el nombre de la clase, el ícono cambiará.
Además, si puede alternar el nombre de la clase, también puede cambiar el texto.
MUESTRA
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--===============================================================================================--> <link href="../Assets/Fonts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <!--===============================================================================================--> <script src="../Scripts/JQuery/jquery-3.2.1.min.js"></script> <!--===============================================================================================--> <style> #icon { width: 100px; height: 50px; border: 1px solid #000; font-size: 25px; display: flex; align-content: center; align-items: center; padding: 5px; } </style> <script> $(document).ready(function() { $("#icon").click(function() { if ($("#icon i").hasClass('fa-play')) { $("#icon i").removeClass("fa-play").addClass("fa-pause"); $("#icon span").text('pause'); } else { $("#icon i").removeClass("fa-pause").addClass("fa-play"); $("#icon span").text('play'); } }); }); </script> </head> <body> <div id="icon"> <i class="fa fa-play" aria-hidden="true"></i> <span>Play</span> </div> </body> </html>Puede alinearlo con flex , dar transición al contenedor de esta manera:
function onToggle() { document.getElementById("clicked").classList.toggle("button"); document.getElementById("clicked").classList.toggle("pauseicon"); } .container { padding: 10px; border: 1px solid; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s linear; } .text-1, .text-2 { display: none; } .button { border: 0; background: transparent; box-sizing: border-box; width: 0; height: 20px; border-color: transparent transparent transparent #202020; transition: 100ms all ease; cursor: pointer; border-style: solid; border-width: 10px 0 10px 20px; padding: 0 } .button.paused { border-style: double; border-width: 0px 0 0px 20px; } .pauseicon { border-left: 10px solid #000; border-right: 10px solid #000; width: 10px; height: 25px; } .button:hover { border-color: transparent transparent transparent #404040; } .button:hover+.text-1 { display: inline; } .pauseicon:hover~.text-2 { display: inline; } <div class="container"> <button class='button' id="clicked" onclick="onToggle()"></button> <span class="text-1">Play</span> <span class="text-2">Pause</span> </div>