固定 div 右侧的悬停菜单

2024-01-23

我有一个固定位置的 div(顶部面板),它还应在最右侧包含一个设置菜单(当前通过浮动)。

将鼠标悬停在设置图像上时,我想在图像下方显示一个菜单。 我希望菜单像图像一样与右侧对齐。

<div id="panel" style="position:fixed">
  <panel-entry 1>
  <panel-entry 2>
  <panel-entry n>

  <div id="settings" style="float:right/snapped to the right side>
    <img src=settings>
    <ul>
      <li>setting 1</li>
      <li>setting 2</li>
      <li>setting n</li>
    </ul>
  </div>
</div>

非常感谢任何使用 jQuery 的想法,请随意重新排列任何 html。


不需要 jQuery,只需提供您的#panel宽度:

#panel {
  position: fixed;
  width: 100%;
}
#settings {
  float: right;
}

See DEMO http://jsfiddle.net/uVp45/6/.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

固定 div 右侧的悬停菜单 的相关文章

  • IE8 中的 Javascript 消息超出堆栈空间

    我正在使用 Breeze 1 4 1 Internet Explorer 8 和 ASP NET MVC 4 Web API 我在查询时收到以下消息 查询失败 localhost port breeze Data Metadata 元数据导
  • 如何在 Jest 测试中模拟 StatusBarManager.getHeight?

    我正在使用 expo 34 并且反应本机用户界面库 https www npmjs com package react native ui lib来自 wix 并且在为我的组件设置笑话测试时遇到问题 问题看起来出现在link https g
  • JQuery 验证表单数组中的重复项

    我想显示重复或不唯一的值的错误 但我的表单接受输入数组 我已经在 jsfiddle 上检查了这些问题 name week 失败但是name week 工作正常 问题1 https stackoverflow com questions 24
  • 赋予 d3 序数轴标签与尺度名称不同

    我有一个序数scale具有不同值的某些标签 我想显示该比例的轴 其中轴标签与比例标签不同 我有这个代码 var width 1000 var height 600 var margins left 100 40 right 25 botto
  • React.js this.props.data.map() 不是一个函数

    我正在搞乱反应并尝试解析和渲染 json 对象 现在 我只是使用硬编码对象设置它以进行测试 而不是从 ajax 调用中获取它
  • 如何正确关闭 Node.js Express 服务器?

    我需要在收到回调后关闭服务器 auth github callback网址 与平常一样HTTP API http nodejs org docs latest api http html关闭 服务器目前支持server close call
  • Angular UI.Bootstrap 单选按钮在 ng-repeat 中表现得很奇怪[重复]

    这个问题在这里已经有答案了 我在 Angular 的 ui bootstrap 中动态生成无线电模型的选项时遇到问题 我想我可以简单地对数组进行 ng repeat 使用 btn radio 属性的内容 如下所示 in the contro
  • 表单提交不起作用

    我有一张桌子 可以打印出所有可用的相机 它使用表单来更改这些设置 问题在于该表单仅更新条目中的最后一个摄像机 换句话说 如果我更改表单并为列表中的最后一个摄像机点击 应用 它将起作用 如果我更改此列表中任何其他摄像机的表单 它会将其更改为与
  • Django 模板变量从 {% for %} 循环到 Javascript

    这是一个迭代记录的 Django 模板 每条记录都包含一个由 JS 函数填充的 div 为了让 JS 知道要做什么 它需要从每次 for 循环迭代中获取一个变量并使用它 我不知道具体如何实现这一目标或是否可能 我不知道 也许记录在单独的 J
  • 自动调整元素 (div) 大小以适合水平内容

    我尝试谷歌搜索 但没有得到太多结果 我正在构建一个水平轮播 它在浮动的 LI 中显示图像 我想解决的问题是 每次我向轮播添加缩略图 我是延迟加载 时 我都需要重新计算轮播的宽度 以便所有浮动缩略图很好地并排排列 其一 我宁愿不必在 JS 中
  • html输入数字,min + step,使step忽略min?

    是否有可能使step忽略min属性
  • router.navigate 使用查询参数 Angular 5

    我在使用查询参数路由到路由时遇到问题我有一个像这样的函数 goToLink link this router navigate link split 0 queryParams this sortParams link 和这个功能 sort
  • 如何在javascript中解析 yyyy-MM-dd HH:mm:ss.SSS 格式的日期?

    const time 2016 11 16 00 00 00 000 const date new Date time console info date 似乎 safari 无法解析 yyyy MM dd HH mm ss SSS 格式日
  • jVectorMap - 向下钻取地图 - 自定义背景

    我正在使用 jVectorMap 中的向下钻取地图 并且尝试将自定义背景颜色设置为地图的第二层 为了自定义主级别 我使用 main 参数 但我不知道如何将其扩展到地图的较低级别 提前致谢 马切伊 None
  • 如何在放置后拖动图像克隆?

    我的图像在旋转后可以拖动 但是当图像掉落时我无法第一次拖动图像 这是图像拖放的代码 dhtmlgoodies xpPane li rotatable 我可以拖动此图像克隆并将其放在 工作区域 上 我无法在放置后第一次拖动图像克隆 但克隆在旋
  • 如何在 Bootstrap 4 轮播中堆叠多个图像

    我不知道如何使用 Bootstrap 4 以及如何在一张幻灯片中显示多个小图像 例如缩略图 而不是让图像填充轮播的宽度 我已经使用下面的代码尝试了一些操作 但仍然无法堆叠很多图像 div class container h2 class t
  • 谷歌地图绘制两点之间的路线

    我编写了这段无辜的 JavaScript 代码 它允许用户创建两个标记并绘制它们之间的路线 它不起作用 相反 它给出了一个奇怪的错误 Uncaught TypeError Cannot read property ya of undefin
  • ES6解构对象赋值函数参数默认值

    您好 我正在查看在传递函数参数时使用对象解构的示例对象解构演示 https developer mozilla org en US docs Web JavaScript Reference Operators Destructuring
  • 相当于 JavaScript 中 Ruby 的each_cons

    许多语言都曾提出过这个问题 但 javascript 却没有 Ruby 有方法Enumerable each cons https devdocs io ruby 2 5 enumerable method i each cons看起来像这
  • 通过jquery ajax()和serialize()提交html表单

    我想通过 jquery ajax 提交此表单 这是我所做的 但它不起作用 即表单正在提交并刷新页面 但我没有看到响应 即在同一页面上打印数组 HTML

随机推荐