网页中鼠标移上弹出下拉菜单代码

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量4.9k 收藏 4
点赞数
分类专栏： 网站常见功能 文章标签： menu border function div javascript

<SCRIPT language=javascript><!--
function out()
{
if(window.event.toElement.id!="menu" && window.event.toElement.id!="link")
menu.style.visibility="hidden";
}
//-->
function out1()
{
if(window.event.toElement.id!="menu1" && window.event.toElement.id!="link")
menu1.style.visibility="hidden";
}
//-->
</SCRIPT>

<body>
<div id="back" οnmοuseοut="out()"style="position:absolute;top:225;left:250;width:160;height:40;z-index:1;visibility:visible;">
<span id="menubar" οnmοuseοver="menu.style.visibility='visible'">
<font color=red size=2>菜单一</span>
<div border=1 id="menu" style="position:absolute;top:15;left:0;width:50;height:10;z-index:2;visibility:hidden;">
<a id="link" href="LINK1.htm">LINK1</a>
<a id="link" href="LINK2.htm">LINK2</a>
<a id="link" href="LINK3.htm">LINK3</a>
<a id="link" href="LINK4.htm">LINK4</a>
<a id="link" href="LINK5.htm">LINK5</a>
<a id="link" href="LINK6.htm">LINK6</a>
</div>
</div>
<div id="back" οnmοuseοut="out1()"style="position:absolute;top:225;left:330;width:160;height:40;z-index:3;visibility:visible;">
<span id="menubar" οnmοuseοver="menu1.style.visibility='visible'">
<font color=red size=2>菜单二</span>
<div border=1 id="menu1" style="position:absolute;top:15;left:0;width:50;height:10;z-index:4;visibility:hidden;">
<a id="link" href="LINK1.htm">LINK1</a>
<a id="link" href="LINK2.htm">LINK2</a>
<a id="link" href="LINK3.htm">LINK3</a>
<a id="link" href="LINK4.htm">LINK4</a>
<a id="link" href="LINK5.htm">LINK5</a>
<a id="link" href="LINK6.htm">LINK6</a>
</div>
</div>
</div>

ninja
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jquery实现鼠标经过弹出下拉菜单横向导航
01-23
jquery实现鼠标经过弹出下拉菜单横向导航
.net 鼠标移入弹出页面_每个人都应该知道的十大电脑鼠标使用技巧，别说你不知道...
weixin_39992483的博客
11-23 196
电脑鼠标是我们日常使用频率最高的一个设备，但遗憾的是，大多数计算机用户都没有充分利用计算机鼠标。下面我就给出一些使用计算机鼠标的提示和秘密，以帮助大家充分发挥计算机鼠标的潜力，并提高整体工作效率。1、按住Shift键并单击鼠标许多文本编辑器和程序允许使用Shift键和鼠标高亮显示全部或部分文本，例如，单击文本框中文本的开头，按住Shift键，滚动到底部，然后单击文本末尾以突出显示所有文本。小提示：...
【Axure教程】鼠标右键显示菜单
mushe93的博客
06-23 1499
今天教大家制作一个鼠标右键显示菜单的原型模板
实现 鼠标移上去出现多菜单
kaka100
12-10 171
[code="html"] WebForm5 /* Root = Horizontal, Secondary = Vertical */ ul#navmenu-h { margin: 0; border: 0 none; padding: 0; width: 500px; /*For KHTML*/ list-...
web前端，鼠标放上去出现下拉框html+css
热门推荐
翟浩浩Android专栏
09-15 2万+
dl{            width: 100px;            display: none;            margin-top: -20px;            text-align: center;        }         dl dt{            border-bottom: solid #000 1px;
制作鼠标移动到div上面显示弹出框
weixin_34112030的博客
08-31 800
&lt;div class="show-dialog hide"&gt; &lt;header&gt; &lt;div class="note"&gt; &lt;span class="title"&gt;三代亲子嘉年华&lt;/span&gt; &lt;span class=
css实现六角星
qq_39039128的博客
09-23 1194
<!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-U...
鼠标放到链接上出现一个说明框，里面有滚动的文字说明
血色残阳的专栏
11-26 1472
a href="http://www.helpor.net" target="_blank" onMouseOver="helpor_net_show(this,event,看到了吧？)" onMouseOut="helpor_net_hide()">把鼠标放上来试试a>div id="tooltip2" style="position:absolute;visibility:hidden
html中向上的菜单怎么写,使用HTML+CSS实现鼠标划过的二级菜单栏的示例
weixin_39930671的博客
05-30 441
本文介绍了使用HTML+CSS实现鼠标划过的二级菜单栏的示例，分享给大家，具体如下：先上效果图：1、鼠标没在上面2、鼠标放在一级菜单上，展开二级菜单3、鼠标放在二级菜单上代码：二级菜单测试/*为了使菜单居中*/body {padding-top:100px;text-align:center;}/* -------------菜单css代码----------begin---------- */....
用javascript实现鼠标移入出现下拉菜单
qq_49464663的博客
08-09 3497
javascript版下拉菜单的实现，鼠标事件，事件委托
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
10-26
本文为大家详细介绍下使用javascript实现当鼠标移开时已弹出子菜单自动消失，具体如下，感兴趣的朋友不要错过
vue实现鼠标移过出现下拉二级菜单功能
10-15
主要介绍了vue实现鼠标移过出现下拉二级菜单功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery自定义右键弹出菜单代码
06-05
jQuery自定义右键弹出菜单代码是一款网页仿电脑桌面点击鼠标右键弹出下拉菜单选择代码，样式挺漂亮的。
下拉菜单弹出插件
06-06
鼠标移动上去后显示下拉菜单，移走后消失，支持下拉二级导航
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1459
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 1139
​​​​​​​。
一个小时学习javaScript
weixin_43064364的博客
04-20 858
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 740
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 507
官网代码（在取消选中状态的时候不生效）
antd 右键input输入框，在鼠标右键地点弹出Dropdown实现的菜单
07-13
要实现在 Ant Design 的 Input 输入框上右键点击，在鼠标右键位置弹出 Dropdown 菜单，您可以使用 `onContextMenu` 事件结合 `Dropdown` 组件来实现。以下是一个示例代码： ```jsx import React, { useState } from 'react'; import { Input, Dropdown, Menu } from 'antd'; const App = () => { const [menuVisible, setMenuVisible] = useState(false); const [inputValue, setInputValue] = useState(''); const handleContextMenu = (e) => { e.preventDefault(); const mouseX = e.clientX; const mouseY = e.clientY; setMenuVisible(true); setMenuPosition({ x: mouseX, y: mouseY }); }; const handleMenuClick = (e) => { console.log('点击了菜单项', e.key); setMenuVisible(false); }; const menuPositionStyle = { position: 'fixed', left: menuPosition.x, top: menuPosition.y, }; return ( <div onContextMenu={handleContextMenu}> <Input value={inputValue} onChange={(e) => setInputValue(e.target.value)} /> {menuVisible && ( <div style={menuPositionStyle}> <Dropdown overlay={ <Menu onClick={handleMenuClick}> <Menu.Item key="item1">菜单项1</Menu.Item> <Menu.Item key="item2">菜单项2</Menu.Item> <Menu.Item key="item3">菜单项3</Menu.Item> </Menu> } onVisibleChange={(visible) => setMenuVisible(visible)} visible={menuVisible} > <div style={{ display: 'none' }} /> </Dropdown> </div> )} </div> ); }; export default App; ``` 在上面的示例中，我们首先定义了一个 `App` 组件。在组件中，我们使用 `useState` 来维护菜单的显示状态 (`menuVisible`)、输入框的值 (`inputValue`) 和菜单的位置 (`menuPosition`)。 在 `handleContextMenu` 函数中，我们通过 `e.preventDefault()` 来阻止默认的右键菜单显示，并获取鼠标右键点击的位置 (`e.clientX` 和 `e.clientY`)。然后，我们将 `menuVisible` 设置为 `true`，以显示下拉菜单，并将菜单的位置保存到 `menuPosition` 中。 接着，我们根据 `menuPosition` 动态设置菜单的位置，通过 `style` 属性给菜单元素添加 `position: fixed;`、`left: menuPosition.x;` 和 `top: menuPosition.y;`。 最后，在 `Dropdown` 组件外部包裹一个 `<div>` 元素，并设置其样式为动态计算的菜单位置样式。这样就可以在鼠标右键点击的位置弹出 Dropdown 菜单。 这样，当您在输入框上右键点击时，就会在鼠标右键点击的位置弹出 Dropdown 菜单，并且可以选择菜单项进行操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值