实现搜索框跟随鼠标悬停菜单功能

Posted madlife

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现搜索框跟随鼠标悬停菜单功能相关的知识，希望对你有一定的参考价值。

先上效果图:

技术分享图片

关键点只有一个:获取鼠标悬停点位置.

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>
View Code

 

以上是关于实现搜索框跟随鼠标悬停菜单功能的主要内容，如果未能解决你的问题，请参考以下文章

减少jQuery依赖， CSS3实现鼠标悬停动效

Reactstrap 鼠标悬停时自动下拉菜单

鼠标跟随特效妨碍鼠标点击未突出的空间装扮以及组件功能怎么办

鼠标悬停子菜单时禁用 .slideUp 功能

jquery可拖动和鼠标悬停

如何显示swt文本框的悬停文本