先上效果图:
关键点只有一个:获取鼠标悬停点位置.
event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
event.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
event.screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标
event.screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
event.x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标
event.y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标
所以只需要搜索框的margin-top设置 event.pageY-event.offsetY(鼠标悬停li标签距离顶部的高度)
以下是源码直接运行即可
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test</title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } .title { display: block; background-color: #007ACC; color: #ffffff; height: 50px; line-height: 50px; width: 200px; padding-left: 20px; border-bottom: rgb(34, 69, 88) solid 1px; } .menu{ float: left; } .menu ul { display: block; } .menu ul li { background-color: #399AD1; border-bottom: rgb(34, 69, 88) solid 1px; color: #ffffff; height: 40px; line-height: 40px; width: 200px; padding-left: 20px; } .search { /* display: none; */ float: left; margin-left: 1px; width: 300px; height: 100px; background-color: #399AD1; border: #007ACC solid 2px; } </style> </head> <body> <div class="menu"> <div> <span class="title">标题1</span> <ul style="display: none;"> <li>标题1-小标题1</li> <li>标题1-小标题2</li> <li>标题1-小标题3</li> </ul> </div> <div> <span class="title">标题2</span> <ul style="display: none"> <li>标题2-小标题1</li> <li>标题2-小标题2</li> <li>标题2-小标题3</li> </ul> </div> </div> <div class="search"> <label for="time">日期:</label> <input type="text" id="time"> <br> <label for="type">类型:</label> <input type="text" id="type"> <br> <button>搜索</button> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { $(".title").on("click", function () { $(this).next().slideDown(); $(this).parent().siblings().children("ul").slideUp(); }) $("li").mouseover(function (e) { var self = $(this); $("li").css("background-color", "#399AD1"); $(this).css("background-color", "red"); console.log(e.pageY+"::"+e.offsetY); $(".search").css("margin-top", e.pageY-e.offsetY+20); }); }) </script> </body> </html>