如何使用jQuery创建一个在鼠标移动时弹出的div,并在点击时停留
在这篇文章中,我们将学习如何使用jQuery创建一个在鼠标移动时弹出的div,并在点击时停留。
步骤:
- 首先,我们创建一个HTML div元素,当我们把鼠标放在一个元素上时,我们希望它能弹出来,并在CSS样式中把它的显示属性设置为none。
- 在脚本标签中,我们创建一个变量flag,并将其值设为-1。
- 现在在脚本标签中,我们将选择我们想要鼠标悬停的元素。这是一个HTML a元素,其类别为gfg。我们选择类别为fg的元素a,然后使用hover()函数,当我们将鼠标悬停在一个元素上时,该函数用于应用一种效果。
- 我们使用两个函数,第一个在mouse-enter事件发生时执行。我们选择具有popup类的div,并使用jQuery attr()将其display属性设置为block。当mouse-leave事件发生时,第二个函数执行,当标志不等于-1时,div的display值为none。
JavaScript 代码:
- 我们在元素a上添加一个jQuery点击事件。 当我们点击元素a时,函数将变量标志值设置为1,所以div元素在点击后保持不变。
HTML代码:以下是上述方法的完整实现。
输出:
弹出的鼠标悬停