如何在鼠标悬停时创建一个弹出 div 并在使用 jQuery 单击时停留？

在本文中，我们将学习如何使用 jQuery 在鼠标悬停时创建弹出 div 并在单击时停留。

方法：

• 首先，我们创建一个 HTML div元素，当我们将鼠标悬停在一个元素上时，我们想要弹出它并设置它的 在 CSS 样式中将属性显示为none 。

display:none;

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

$flag = -1;

• 现在在脚本标签中，我们将选择我们想要鼠标悬停的元素。它是一个具有类gfg的 HTML a元素。我们选择类 gfg 的元素a ，然后使用hover()函数，当鼠标悬停在元素上时，该函数用于应用效果。
• 我们使用两个函数，第一个在鼠标输入事件发生时执行。我们选择带有类popup 的div并使用 jQuery 将其显示属性设置为阻止 attr() 。当鼠标离开事件发生时，第二个函数在标志不等于 -1 时以div的显示值为none执行。

JavaScript 代码：

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

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

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

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

HTML

  

  
    
    
    
  
    
        center {
            font-size: 30px;
            color: green;
        }
  
        .popup {
            display: none;
            width: 500px;
            border: solid red 3px
        }
    

  

    
        
            Hover here 
            to see the changes.
        
  
        
            GeeksforGeeks
        
    
  
    
        $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;
        });
    

  

输出：

弹出鼠标悬停