jQuery鼠标悬停信息提示
鼠标悬停显示信息的功能，常见但想做好也挺讲究。用jQuery配合getBoundingClientRect()去算位置，显示的提示框能自适应出现在目标元素下方，居中且不乱飘，兼容性也不错。CSS 方面建议你把info-div初始设成display: none，鼠标移入再用 JS 去定位和显示。要注意一点，提示框的位置最好别写死，尤其是在响应式页面里，不然分分钟跑出屏幕外。
整个思路简单实用，尤其适合那种要做小提示、表单信息、按钮的小模块。配合点动画更丝滑，体验也提升不少。如果你想试试纯 CSS 的方案，也可以看下后面列的相关链接。
文件大小：31.08KB
评论区