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

如何使用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,并在点击时停留?

弹出的鼠标悬停

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

jQuery 方法