Tips for displaying play and pause text when hovering

Question

Tips for displaying play and pause text when hovering

In my demo application, I have successfully created a Play and Pause icon. However, there is an additional requirement - I need to display the text PLAY and PAUSE when hovering.

Currently, I am encountering two issues:

The icon jumps when hovering over the button
The PLAY or PAUSE text is not centered (it appears slightly below)
I also need to display different text depending on the state

To see the code, please visit: 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>

javascript html css

Answer 1

Answer №1

To create a toggle effect for icons or text on hover, my recommendation is to utilize the Font Awesome library instead of using .png images. Font Awesome allows you to easily change icons by manipulating class names through jQuery.

You can implement this functionality using jQuery's .hover method, as detailed in the documentation: https://api.jquery.com/hover/
Within the .hover function, you can check if the div has a specific class by referencing the hasClass() method.
Subsequently, you can remove a class using removeClass() and add another one dynamically.

If you choose to use Font Awesome, altering the class name will automatically update the displayed icon. Furthermore, toggling class names enables you to modify the associated text as well.

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>

Answer 2

To create a toggle effect for icons or text on hover, my recommendation is to utilize the Font Awesome library instead of using .png images. Font Awesome allows you to easily change icons by manipulating class names through jQuery.

You can implement this functionality using jQuery's .hover method, as detailed in the documentation: https://api.jquery.com/hover/
Within the .hover function, you can check if the div has a specific class by referencing the hasClass() method.
Subsequently, you can remove a class using removeClass() and add another one dynamically.

If you choose to use Font Awesome, altering the class name will automatically update the displayed icon. Furthermore, toggling class names enables you to modify the associated text as well.

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>

Answer 3

Answer №2

You have the option to align it using flex and add a transition effect to the container like so:

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>

Check out the Demo

Answer 4

You have the option to align it using flex and add a transition effect to the container like so:

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>

Check out the Demo

Tips for displaying play and pause text when hovering

Answer №1

Answer №2

Similar questions

What is the best way to allow text input in a table cell to exceed the confines of the table when it is clicked on

Is there a way to align text without any vertical spacing between lines?

Error: React unable to access the 'title' property as it is undefined

Mastering the Art of Binding Option Data from API Responses in Vue.js

Displaying React components using Bootstrap in the navigation bar

What is the best method for displaying file size in a user-friendly format using Angular 6?

Achieving successful ratings for various items

Adjust parent div size automatically when child is resized - jQuery Resizable Plugin

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Attempted to create a node index.js file but encountered an error

Why is the Twitch api map function returning nothing, while the console log is showing output?

"CSS background not loading properly on jQuery infinite scroll feature, affecting the loading of

What is the reason behind the absence of hoisting in C#?

Is it possible to open a new tab window using a radio button?

Revamping the Bootstrap admin template

Tips on effectively utilizing a value that has been modified by useEffect

Problem with Flickity's is-selected feature

Enabling hover effects to scroll divs only when interacted with

When it comes to utilizing the method ".style.something" in JavaScript

Managing the display of an extensive list of items in react - best practices