How to show play and pause text on hover

user_5711656 0
Viewed 132

I have a demo application in which I want to show the Play and Pause icon.I am able to make a play and pause Icon. But there is another requirement I need to show PLAY and PAUSE TEXT on hover

I am facing two issues.

  • My icon is Jumping above when I hover to button
  • PLAY or PAUSE text not coming centre.(It is showing slightly below )
  • How to show different text depending state;

Here is my code 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>

css html javascript
2 Answers

For toggle the icon or text on hover. I suggest to use the Font Awesome library.

Instead of the .png images because it using a class name to put an icon, and that make it easy to change the icon using jquery.

  1. You can use jquery (.hover) https://api.jquery.com/hover/

  2. In (.hover) function you can check if div has a class https://api.jquery.com/hasclass/

  3. Then you can remove a class https://api.jquery.com/removeclass/ and add another one.

If you use Font Awesome, once you change the class name the icon will be changed.

Also if you can toggle the class name you can also change the text.

SAMPLE

<!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>
user_65993500

You can align it with flex, give transition to the container like this:

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>

Working Fiddle

user_125159630
Related