先上效果图:
关键点只有一个:获取鼠标悬停点位置.
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标签距离顶部的高度)
以下是源码直接运行即可
<!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>
原文地址：https://www.cnblogs.com/madlife/p/9127527.html
时间： 2024-10-14 14:27:46