正文

实现搜索框跟随鼠标悬停菜单功能(代码片段)

madlife  madlife  2022-11-19  359

关键词：

先上效果图:

技术分享图片

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

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

qml-canva画板画图功能-跟随鼠标位置进行随笔画(代码片段)

参考博主文章进行整理了代码，实现功能https://blog.csdn.net/UbuntuTouch/article/details/46375697功能实现如下图： 1.组件ColorSquare.qml该组件主要是颜色提取块，完整代码如下：importQtQuick2.0Rectangleid:colorSquare;width:48;height:48color:"green" 查看详情

selenium之鼠标悬停/警告框处理/多窗口切换/下拉菜单的处理的介绍

一.鼠标悬停代码里要引入ActionChains包，代码如下：fromselenium.webdriver.commom.action_chainsimportActionChainsa.ActionChains----悬停类b.move_to_element()----移动鼠标c.perform()----让悬停生效例子：fromseleniumimportwebdriverfromtimeim 查看详情

在悬停的边界动画(代码片段)

...子上，并且当悬停其他盒子时边框跟随鼠标位置？我试图搜索类似的例子，我找不到任何东西。鼠标悬停：答案我创造了一个Demo！也许这就是你想要的:)$(document).ready(function()varnavBar=$('#navBar');varperNav=$('#navBarnav');varborderBlock=$('#nav... 查看详情

分享一个色块跟随鼠标移动的菜单代码(代码片段)

demo地址：http://www.dtzhuanjia.com/pri...html：<!doctypehtml><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><title& 查看详情

css将鼠标悬停在子菜单项上时的样式父菜单项(代码片段)

查看详情

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

】鼠标悬停子菜单时禁用.slideUp功能【英文标题】：Disable.slideUpfunctionwhenmousehoversubmenu【发布时间】：2013-01-0500:20:45【问题描述】：我有一个小问题。我希望当我将鼠标悬停在子菜单上时，当它打开时，子菜单不会折叠。谢谢。$(... 查看详情

使用ajax+jquery实现搜索框的历史记录提示功能(代码片段)

当键盘离开(keyUP事件)的时候进行进行相关的提示（也就是发送请求进行查询）用一个盒子进行封装历史记录。（平时的时候通过display:none进行隐藏）input的输入框需要通过一个id属性进行绑定，因为Jquery需要使... 查看详情

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

...：2020-04-1023:49:48【问题描述】：我正在尝试使用reactstarap实现滑动下拉菜单，但找不到任何支持文档或代码。Bellow是我的示例菜单，我想要实现的是鼠标悬停动作时的自动滑动下拉菜单。<div><Navnavbar><NavItem> 查看详情

jquery可拖动和鼠标悬停

...开的下拉菜单。我正在使用jqueryui中的可拖放和可拖放来实现一些拖放功能。似乎菜单的鼠标悬停事件在拖动时不会触发，有没有办法让它们工作？我已经实现如下（简化）：$(\'#some_id\').draggable(helper:\'clone\',o 查看详情

关于wpf中popup跟随鼠标移动显示(代码片段)

...移动显示最近在做一个画图工具，里面有一个功能是需要实现，当鼠标移动的时候在，鼠标的旁边显示坐标信息。第一反应是想到了tooltip，但是tooltip有许多的限制，查询资料的过程中看到了popup，popup比tooltip更加灵活，下面讲... 查看详情

悬停“向右下拉”菜单

...【发布时间】：2021-05-0319:17:40【问题描述】：我正在尝试实现一个侧菜单，当您将鼠标悬停在其中一个项目上时，该菜单会展开一个项目“表格”。我正在使用TailwindCSS和React。我面临的问题是当我将鼠标悬停在按钮上时菜单没... 查看详情

qlabel选定目标框功能实现(代码片段)

QLabel选定目标框功能实现问题背景??基于PyQt5开发了一个可以用于目标跟踪的软件，在开发过程中遇到一个问题，就是如何在PyQt5的组件QLable中自主选定目标框，这个在opencv里面有专门的函数完成这个工作:cv2.selectROI(),我的目的就... 查看详情

qlabel选定目标框功能实现(代码片段)

vue前端：几种搜索框功能实现(代码片段)

Vue前端：几种搜索框功能实现前言一、搜索框输入内容自动检索（1）检索到输入新的内容后，就自动向后端发送查找请求（即时搜索）（2）一次请求搜索到所有可能需要的数据，然后根据搜索... 查看详情

用wpf实现在listview中的鼠标悬停tooltip显示(代码片段)

原文:用WPF实现在ListView中的鼠标悬停Tooltip显示一、具体需求描述在WPF下实现，当鼠标悬停在ListView中的某一元素的时候能弹出一个ToolTip以显示需要的信息。二、代码实现在.XMAL文件中 CodeCodehighlightingproducedbyActipr... 查看详情

移动端input输入框实现自带键盘“搜索“功能并修改x(代码片段)

主要利用html5的，input[type=search]属性来实现，此时input和type=text外观和功能没啥区别；html代码入下:<formaction=""id="myform"><inputtype="search"id="input"value=""placeholder="快速搜索"results="5"/></form>但要实现点击键盘右下查看详情

react实现一个带选择功能的输入框(代码片段)

背景遇到这样一个需求，在一个表单中实现一个带选择功能的输入框，既能输入又能选择。开始经过一番思考，有了一个初步的思路：使用Antd的下拉菜单和Input去做，页面加载的时候就去请求数据，然后在Input得到焦点的时候展... 查看详情

原生js实现悬停下拉菜单(代码片段)

...菜单样式的display属性的属性值从none=>block，具体实现见下，重点关注下面几个部分。给每个section设置浮动。将可继承属性设置在section父盒子上，字体相关的属性。设置悬停时，悬停在section父盒子上，子... 查看详情