84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
效果类似于这个我是效果
主要想知道那个hover的效果是怎么实现的：鼠标hover一个按钮后，显示"Popover气泡卡片"，之后只要鼠标指针在按钮或Popover气泡卡片中，Popover气泡卡片就不会消失，出了这块区域才会消失。
可能您遇到的问题是：只要移出btn了，popover就隐藏, 哪怕鼠标正在移动到popover的过程中。
因为popover是属于body下position:absolute;的一个标签，并且是程序生成的。
代码原理如下：
var hideInterval = null; $('#button').hover(function(){ clearTimeout(hideInterval); $('#popover').show(); }, function(){ clearTimeout(hideInterval); hideInterval = setTimeout(function(){ $('#popover').hide(); }, 100); }); $('#popover').hover(function(){ clearTimeout(hideInterval); }, function() { clearTimeout(hideInterval); $('#popover').hide(); });
也就是鼠标离开宿主时，并没有立即hide，而是启用了一个timeout来hide
此处判断用户的思维，如果100ms移动到那个popover上去，此时清除timeout，也就是继续显示。
不然就是隐藏了。
这个100ms不是绝对的，之前我设置的是1000ms，就是为了更友好的提示。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
可能您遇到的问题是：只要移出btn了，popover就隐藏, 哪怕鼠标正在移动到popover的过程中。
代码原理如下：
也就是鼠标离开宿主时，并没有立即hide，而是启用了一个timeout来hide
此处判断用户的思维，如果100ms移动到那个popover上去，此时清除timeout，也就是继续显示。
不然就是隐藏了。
这个100ms不是绝对的，之前我设置的是1000ms，就是为了更友好的提示。