首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS 下拉菜单与 focus

hover 算是比较熟悉了, PC 鼠标悬停于此时 :hover 伪类生效,比如 链接 样式正是采用 :hover 实现鼠标经过时反馈,以提示用户这是可点击。...移动端上稍微有些不同,毕竟所有控制——无论单击、长按抑或划动——都由接触开始,也没有鼠标的「悬停」逻辑,为了方便判定,移动端上若想激活 :hover 也是单击(触摸)。...导航栏之所以不直接显示而是放进下拉菜单,也是为了移动端等小尺寸设备中显示得优雅一点,因此这个单击判定其实是优势。...不过还是有点问题,比如一台 iPad mini 这种中尺寸设备,竖屏 + 鼠标情况下,但凡鼠标掠过就会调出下拉菜单;或者即便是 PC,把窗口缩小也同样是掠过频繁调出下拉菜单……毕竟是为了小尺寸设备设计而其中并非全是触摸设备...Spectre 解释是这样按钮可获得焦点,事实,并非所有元素默认支持聚焦。本来 是可以获得焦点,只不过要 带 href 属性。

5.4K20

后台系统设计(上篇:选择)

单个选项下,存在多组互斥选项,且互斥选项组之间存在一定关系,可以考虑混用分段控件和常规按钮,由于分段控件视觉占用更大面积,故给人在层级更加置前。 ?...五、Transfer 穿梭框/列表构造器 同一页面上显示 「源」 列表和 「目的」 列表,通过使用按钮或拖拽,直观两栏之间移动元素,完成选择行为。 外观 常规: ?...最佳用法 ·行为穿梭框是一种复杂、较难认知一种控件模式,且占用大量屏幕空间,源选项较少情况下复选列表框则是一种更为简单替代方案。...超出最大宽度从末尾截断,并添加省略号,鼠标悬停显示全部文本内容。 ? ·如果没有预先选择,使用占位符(灰色文本)进行操作提示。例如:请选择。...·多选情况下,由于是多选操作,我们将搜索框放在下拉菜单内,这样就不影响原有框体承载选项问题。 ? 但是该模式极大复杂了控件及用户交互行为。

9.6K21
您找到你想要的搜索结果了吗?
是的
没有找到

导航设计15个原则

用户成功导航一个最基本标准是他自己能发现:“我在哪儿?” 通常被选中的菜单选项视觉与其他选项是有差异,这可以帮助用户明确自己的当前所在位置(或者通过面包屑导航定位)。...如果没有用户明确所在位置、导致他们迷路,那么就犯了网站设计最基本错误。讽刺是用户不总是通过首页到达目的页,所以导航菜单对于用户来说意义重大。 导航菜单要与用户任务协调一致 使用易懂链接标签。...鼠标悬停触发下拉菜单呈现时间太过短暂会给用户带来挫败感,因为用户还没来得及点击菜单里某个链接时候,下拉菜单就消失了。另外,太长垂直导航菜单也不利于底部选项点击,除非滚动屏幕。...最后,鼠标悬停触发下拉菜单不能太宽,否则会用户误以为是新页面、并且好奇为什么自己还没点击就出现了新“页面”? 当页面内容很长时,可以考虑悬浮吸顶(或固底)菜单。...尽可能缩短导航菜单最常用操作物理距离。下拉菜单内容比较多时,将用户最常点击链接放到离鼠标悬停选项最近地方可以减少鼠标移动距离(移动端也类似)。

1.5K10

前端开发必备之Chrome开发者工具(上篇)

Chrome DevTools Device Mode 打造移动设备优先完全自适应式网站 该模式不可替代真实设备测试 切换 Device Mode 按钮可以打开或关闭 Device Mode ?...您需要将鼠标悬停到样式规则才能看到这个图标 ? 将鼠标悬停到此图标上可以调出添加 text-shadow、box-shadow、color 和 background-color 声明快捷方式。...移除或移动子元素时将触发子树修改断点。...由于每一条消息时间戳均不同,因此,每一条消息都将显示各自 ? 选择执行环境 以下屏幕截图中以蓝色突出显示下拉菜单称为 Execution Context Selector ?...源代码面板(Sources) 源代码面板中设置断点来调试 JavaScript ,或者通过Workspaces(工作区)连接本地文件来使用开发者工具实时编辑器 格式化混淆代码 某些情况下,我们需要对混淆代码做一定调试

8.2K111

steamvr插件怎么用_微信word插件加载失败

使用手榴弹,您将获得两种不同姿势,具体取决于您如何拿起它们。 Happy Ball 手中移动并挤压。...在这个示例场景中查看不同对象可以你更好地了解交互系统广度,以及如何将其不同部分结合起来创造复杂游戏对象。...HoverLock/Unlock:这用于使手仅悬停在某个对象。 传入 null 将使手悬停锁定时不会悬停在任何东西上。 此技术用于传送弧处于活动状态时使手不会悬停在物体。...某些情况下,对于地面场景使用一个不同于传送网格单独网格是很有用。 在这些情况下,传送系统将从它击中传送网格位置开始追踪,并尝试将玩家放置地板网格。...您还可以通过手指移动下拉菜单添加每个手指附加动画。 这手指可以根据骨架输入移动,同时保持姿势约束。 有几种类型手指运动: Static:没有手指移动。 只使用姿势。 Free:手指自由移动

3.6K10

CSS Transitions

子像素渲染在高分辨率显示设备更为明显,而在低分辨率设备可能不太明显或无法有效运用。它通常用于确保文本和图像在屏幕最佳呈现。...❝默认情况下,CSS中更改是瞬间发生。 ❞ 眨眼之间,我们按钮就瞬间移动到了新位置! (如果想看效果,可以从code 链接[6]中查看效果,这节中效果都可以查看)。...❝通过将一个元素渲染委托给GPU,它将消耗更多视频内存[11](VRAM),这是一种有限资源,特别是低端移动设备。这也是我们为什么,建议不要把xx 设置为all原因。...它有一个“对称”过渡——进入动画与退出动画相同: 当鼠标悬停在元素时,它在250毫秒内向上移动10像素。 当鼠标移开时,元素250毫秒内向下移动10像素。...我相信项目开发中,或多或少遇到过如下情况: 作为开发者,我们可能可以理解为什么会发生这种情况:下拉菜单鼠标悬停在上面时保持打开!

25130

《手把手教你》系列技巧篇(二十九)-java+ selenium自动化测试- Actions相关操作上篇(详解教程)

1.简介   有些测试场景或者事件,Selenium根本就没有直接提供方法去操作,而且也不可能把各种测试场景都全面覆盖提供方法去操作。...比如:就像鼠标悬停,一般测试场景鼠标悬停分两种常见,一种是鼠标悬停在某一个元素上方,然后会出现下拉子菜单,第二种就是搜索输入过程,选择自动补全字段。...关于鼠标悬停,selenium把这个方法放在了Actions.java文件中,先来看看鼠标悬停出现下拉菜单情况。...2.鼠标悬停出现下拉菜单   鼠标悬停出现下拉菜单,顾名思义就是:鼠标悬停在某一元素出现下拉菜单。...,如下小视频所示: 3.搜索输入过程,选择自动补全字段   搜索框输入关键词后,后提示相关内容,然后将其补全进行搜索。

1.4K50

Mockplus中,如何做鼠标悬停时菜单下拉效果?

但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见鼠标悬停时菜单下拉效果,只要换个思路,利用Mockplus状态交互功能,就能轻松实现。...第二步:移动矩形 将蓝色矩形移动到不可见矩形位置,并在右侧参数面板中将蓝色矩形下移一层,此时依然可以看到蓝色矩形,因为上层形状是不可见。 ?...第三步:利用状态交互,实现鼠标悬停时菜单下拉效果。 界面右侧参数面板,将透明度设置为0,并点击“透明度”前小闪电。选择“鼠标经过时”,透明度设置为100。 ?...这样,一个简单鼠标悬停下拉菜单就做好了。 点击界面上方“预览”,即可查看效果: ? 这就是原型设计奇妙之处:用有限条件创造出无限效果。正如弹钢琴,琴键有限,音乐却是无限。...对于一个优秀设计者来说,原型工具本身具备功能并不是最重要。功能越多,操作难度就越大,也越不容易上手。Mockplus是简单易用原型工具,设计师简单而不受限平台进行设计。

2.4K60

《最新出炉》系列初窥篇-Python+Playwright自动化测试-17-处理鼠标悬停

1.简介 有些测试场景或者事件,playwright根本就没有直接提供方法去操作,而且也不可能把各种测试场景都全面覆盖提供方法去操作。...比如:就像鼠标悬停,一般测试场景鼠标悬停分两种常见,一种是鼠标悬停在某一个元素上方,然后会出现下拉子菜单,第二种就是搜索输入过程,选择自动补全字段。...今天跟随宏哥先来看看鼠标悬停出现下拉菜单和自动补全情况playwright是如何处理。 2.鼠标悬停出现下拉菜单 鼠标悬停出现下拉菜单,顾名思义就是:鼠标悬停在某一元素出现下拉菜单。...如下图所示: 3.搜索输入过程,选择自动补全字段 搜索框输入关键词后,后提示相关内容,然后将其补全进行搜索。 3.1项目实战 宏哥这里就以百度搜索为例,进行实战。...如下图所示: 4.小结 Web应用程序中,悬停是一种常见操作,通常用于显示提示信息或下拉菜单。 好了,时间不早了,今天就分享和讲解到这里。感谢您耐心阅读和学习。

40840

网页设计图优化125个小优化!网页可用性

电脑来处理。 s1.指出剩余项目数 [TOC] 2.界面内传达用户的当前位置 接口就像机场。如果没有“你在这里”标记,用户可能会迷路。所以创建这些标记。...使用下图为您界面选择最佳方法。 s2.不干扰专家用户情况下为新手用户添加工具提示 s3.使用卡片分类构建信息架构 如果您想了解用户如何确定或概念化菜单类别,请使用开放式卡片排序。...如果您想了解用户如何将现有元素组织到预先确定类别中,请使用封闭式卡片排序。 2.最大限度地兼容用户工作流程 用户会有不同需求。针对这些不同工作流程自定义您界面。...用户控制数据量 s4.构建角色以识别特定工作流程 s5.用户新标签页中打开页面 很多用户都会页面停放。...s1.自定义用户浏览器说明 s2.小型设备使用单窗口向下钻取 五、帮助用户最小化和克服潜在错误 大多数界面中,错误是不可避免。如果确实发生了,请帮助用户快速轻松地克服它们。

86030

玩转谷歌优化(Google Optimize)

2 谷歌优化(免费版)与谷歌优化360(付费版) 每种套餐中,谷歌都有一个强大对比图表包含其中。这里将简单解释一下免费版局限性。 没有受众。...它可以做到这一点,是因为测试目标实际就是你谷歌优化容器上关联GA数据视图目标。 3 如何实施谷歌优化?...6 变体部分 你可以变体部分中看到以下信息: 1.你实验中有多少种变量 2.每个变量将获得流量百分比(建议均匀分配比例) 3.预览实验桌面设备移动设备效果选项。...显示变体下拉列表,选择一个变体后则会将其加载到编辑器中。 3. 设备测试。此下拉菜单显示可供选择设备。选择其中一个设备将显示你实验该设设备预览模式。默认情况下是始终选择桌面。 4....我们一位分析工程师Kristen Perko关于悬停跟踪文章中也介绍了CSS选择器。 10. 元素层次。 此菜单显示所选元素如何嵌入在其他HTML元素中。 11. 所选元素。

3.7K70

最全Pycharm教程(2)——代码风格

这部分教程并不会介绍如何使用Python进行编程,更多有关Python编程知识请参照:Python编程2、准备工作开始之前,请确认一下情况:(1)安装了Pycharm2.7或更高版本软件(2)已经新建了一个...4、聚焦PEP8代码风格检查然而,默认情况下这些警告提醒是不可见,所以首先需要做就是提升它们优先级以进行显示。...然后按下Ctrl+Alt+T,或者单击主菜单中Code→Surround With选项,Pycharm将会弹出一个下拉菜单,显示当前情况下可用范围控制结构:?...再次回车,移动光标,这里我们Pycharm强大拼写提示下输入抛出异常代码:?...13、添加注释文档代码格式调整完之后,左侧仍然留有一些黄色标志位,鼠标悬停后提示类似于"Missing docstring"警告信息,代码前方亮着小黄灯泡也提示同样信息:解决方法也很简单,弹出下拉菜单中选择

2.6K20

灵感分享|10个优秀网站设计实例赏析及原型分享

进入Sokruta网站后,引入眼帘是醒目的大图背景,然后配合简单直观导航。使用鼠标滚轮切换方式整个网站看起来非常炫酷以及充满个性。这些个性化设计都是视觉给用户冲击,但是确实有效。...网站设计采用了非常给力响应式设计,PC端可以查看“Get Proposal”号召性用语按钮完整菜单,但在平板和移动设备非常精简。...网站在所有设备都做到了很好自适应,大大提升了用户体验。 原型设计 怎么样?看完上面的10个网站设计实例后,是不是灵感十足?有了创意后,该如何做出心中网站呢?...Valet(Web,企业类) Valet是一个企业公司通用网站,在做网站原型时,常常会用到鼠标悬停一些交互,Mockplus中,状态交互很好解决了这个问题。 ? 演示链接 3....此原型模板所用到交互动作有结合弹出面板做下拉菜单效果,鼠标按下文字按钮跳转页面,按钮hover填充效果。 ? 演示链接 5.

6.3K21

Wolfram Mathematica 12.1 文档中心新内容

你从网页顶部往下滑时候这个有下拉菜单选项条就会出现,可以帮助你跳转到相关内容。 每个链接板块都有一个设计过小图标(页面底部左手边),你可以快速通过图片进行判断。...网络易用性特点 反应快速,对移动端友好 我们文档页面反应非常快速,无论你使用什么设备,你都会得到相同网页内容,至于字号、空格和其他不同页面数据都会根据你使用浏览器窗口大小进行自适应调整...悬停可以预览 我们有两个新网络功能,可以点击网页之前预览页面的内容:首页预览和导览页面的函数模板预览。 首页,将鼠标悬停在导览链接上会跳出这个导览本身预览。...复制到剪贴板 在网络查看参考页面时,你可以选择任何范例输入并立即将该内容复制到系统剪贴板悬停效果中,还有一个提供访问该范例锚链接按钮(用于以后引用参考或便于分享): 便于从网页复制范例这一特点会比你最初设想得要更有用.../)并学习如何贡献函数吧。

1.9K30

Selenium自动化测试-6.鼠标键盘操作

——————·今天距2020年77天·—————— 这是ITester软件测试小栈第59次推文 大家好 我是vivi小胖虎 作为测试 好像对于点点点这事一直放不下 如何点点点变得更简单 人变得更懒呢...一、move_to_element() 以百度页面的设置为例,看看鼠标悬停怎么操作。 ? 鼠标移至设置,会出现下拉菜单,显示4个选项,代码如下: ?...整个流程是:定位到元素后,调用ActionChains()方法,将driver作为参数传入,鼠标悬停到元素,perform()执行所有ActionChains中储存行为。 ?...通过link_text定位到需要右击元素,然后执行右击操作。 ?...四、drag_and_drop() drag_and_drop(source, target):将对象拖拽到目标地点; source:源对象,需要移动元素; target:目标对象,将源对象拖放至位置

1.4K10

吐槽一下新浪微博网页版 UI 设计

有向下箭头是鼠标悬停时候显示下拉菜单吧: 可是,右侧这样普通按钮也会有悬停+显示下拉菜单效果: 继续,新浪微博没有把这样效果统一贯彻到底,发微博按钮就容易误导用户悬停然后等待下拉菜单,结果怎么也等不来...右侧这样 tab 页是鼠标悬停激活切换: 但是到了正中 tab 页,需要鼠标单击切换: 3. 按钮风格太多,不够直观简洁。...比如第四行,有两种 “更多” 按钮风格。 分组 “管理” 按钮设定为鼠标悬停展示,但是 “找人” 按钮却不是,不是很理解这种不一致设计原因。 4....每条微博左下角时间显示是一个链接,链接含义对于用户来说不够直观;“举报” 按钮是鼠标悬停在微博才显示,不是很理解为什么这样做。...另外,转发/评论树没办法清晰地展示出来,而且转发时候还可以随意修改被转发信息,这似乎是信息伪造硬伤…… 5. 过多提示、悬停提示,打扰用户阅读。

1.3K10

BootStrap应用开发学习入门

特点: 简单容易上手,开源产品,提高开发人员工作效率 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库移动设备优先样式。...渐进增强:随着屏幕大小增加而添加元素 (2) meta 源标签 viewport meta 标签 为了 Bootstrap 开发网站对移动设备友好,确保适当绘制和触屏缩放: <meta name.../* 超小设备(手机,小于 768px) */ /* Bootstrap 中默认情况下没有媒体查询,但是可以自己添加 */ @media (max-width: @screen-xs-max) {...... } /* 大型设备(大台式电脑,1200px 起) */ @media (min-width: @screen-lg-min) { ... } Bootstrap 网格系统如何跨多个设备工作...添加四个像素内边距(padding)和一个灰色边框, 当鼠标悬停在图像时,会动画显示出图像轮廓。

17.4K20

如何设计下拉菜单(技巧+实例)

纯数值 通常来说,在手机上使用数字键盘输入纯数值会比菜单中选择数值更加快一些。 ? 精确数值 对于精确数值(如购物车里商品数量),可以使用计数器来用户快速对数字进行增减。 ?...网页界面内选项变来变去,就容易用户看得眼花缭乱、抓不住重点。 禁用选项变灰 任何不可选择选项都应该变灰,而不是把它们删掉。...另外,如果用户将鼠标悬停在灰色选项上超过一秒钟,可以考虑用一个简短提示信息来解释该选项为何被禁用。 保留菜单标签/说明 打开下拉菜单时,最好是标明菜单标签或说明。...支持键盘输入 应支持键盘输入和按键,以在下拉菜单内进行导航 。在下拉菜单中,访问键应允许用户不使用鼠标的情况下快速选择可见选项。在下拉框中,用户应该能够键入字母、并快速导航到以该字母开头选项。...需要注意一点是,弹出面板定位策略应设置为“相对于原组件”,否则点击后弹出面板会从别处而不是从下拉选择组件底部弹出。 ? 当然,以上只是简单地介绍了如何用Mockplus做出简单下拉菜单

2.9K84
领券