如何使用jQuery创建一个在鼠标移动时弹出的div，并在点击时停留

在这篇文章中，我们将学习如何使用jQuery创建一个在鼠标移动时弹出的div，并在点击时停留。

步骤:

首先，我们创建一个HTML div元素，当我们把鼠标放在一个元素上时，我们希望它能弹出来，并在CSS样式中把它的显示属性设置为none。

display:none;

在脚本标签中，我们创建一个变量flag，并将其值设为-1。

 $flag = -1;

现在在脚本标签中，我们将选择我们想要鼠标悬停的元素。这是一个HTML a元素，其类别为gfg。我们选择类别为fg的元素a，然后使用hover()函数，当我们将鼠标悬停在一个元素上时，该函数用于应用一种效果。
我们使用两个函数，第一个在mouse-enter事件发生时执行。我们选择具有popup类的div，并使用jQuery attr()将其display属性设置为block。当mouse-leave事件发生时，第二个函数执行，当标志不等于-1时，div的display值为none。

JavaScript 代码:

$("a.gfg").hover(
    function () {
        $("div.popup").attr("style", "display:block");
    },
    function () {
        if ($flag == -1) {
            $("div.popup").attr("style", "display:none");
        }
    }
);

我们在元素a上添加一个jQuery点击事件。当我们点击元素a时，函数将变量标志值设置为1，所以div元素在点击后保持不变。

$("a.gfg").click(function () {
    $flag = 1;
});

HTML代码：以下是上述方法的完整实现。

<!DOCTYPE html>
<html>
  
<head>
  
    <!-- JQuery CDN -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </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>

输出:

如何使用jQuery创建一个在鼠标移动时弹出的div，并在点击时停留？