Skip to content
Related Articles

Related Articles

Improve Article

How to create a pop-up div on mouse over and stay when click using jQuery ?

  • Last Updated : 21 May, 2021
Geek Week

In this article, we will learn how to create a pop-up div on mouseover and stay when click using jQuery.

Approach: 

  • First, we create an HTML div element that we want to pop up when we mouse over on an element and set its display property to none in CSS style.
display:none;
  • In the script tag, we create a variable flag and set its value to -1.
 $flag = -1;
  • Now in the script tag, we will select the element on which we want to mouseover. It is an HTML a element with class gfg. We select element a with class gfg, and then use the hover() function that is used to apply an effect when we mouse hover on an element.
  • We use two functions, first one executes when the mouse-enter event occurs. We select div with class popup and set its display property to block using the jQuery attr(). When the mouse-leave event occurs, the second function executes with the divs display value to none when the flag is not equal to -1.

JavaScript Code:

$("a.gfg").hover(
    function () {
        $("div.popup").attr("style", "display:block");
    },
    function () {
        if ($flag == -1) {
            $("div.popup").attr("style", "display:none");
        }
    }
);
  • We add a jQuery click event on element a. When we click on element a, the function sets the variable flag value to 1, so the div element stays after clicking.
$("a.gfg").click(function () {
    $flag = 1;
});

HTML Code: Below is the full implementation of the above approach.

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- JQuery CDN -->
    <script src=
    </script>
  
    <style>
        center {
            font-size: 30px;
            color: green;
        }
  
        .popup {
            display: none;
            width: 500px;
            border: solid red 3px
        }
    </style>
</head>
  
<body>
    <center>
        <p>
            Hover <a href="#" class="gfg">here</a
            to see the changes.
        </p>
  
        <div class="popup">
            GeeksforGeeks
        </div>
    </center>
  
    <script>
        $flag = -1;
  
        $("a.gfg").hover(
            function () {
                $("div.popup").attr("style", "display:block");
            },
            function () {
                if ($flag == -1) {
                    $("div.popup").attr("style", "display:none");
                }
            }
        );
  
        $("a.gfg").click(function () {
            $flag = 1;
        });
    </script>
</body>
  
</html>

Output:

pop up mouse hover

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :