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

前端如何提高用户体验:增强可点击区域大小

作者:Ahmad Shadded 译者:前端小智 来源:css-tricks 你是否曾经试着点击或点击一个元素(例如:按钮、链接),并且注意到只有单击该元素特定区域,它才会响应?...把鼠标悬停按钮上,光标仍然是一个指针,这很好。不过,也可以选择文本和悬停,有一个文本光标!如果使用了正确元素,就不会发生这种情况。 ?...复选框和单选按钮 当存在复选框或单选按钮元素希望可以单击它或关联标签来激活/禁用它。 ? 从用户体验角度来看,这是难以访问和糟糕。...章节标题 某些情况下,需要在章节标题远端添加“查看更多”按钮或箭头。 在下面的示例将箭头放置假圆,以便可以正确地使箭头居中。...这个想法是,伪元素属于其父元素,因此当我们创建具有特定宽度和高度伪元素,它将充当其父元素单击/触摸/悬停区域。

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

CSS 下拉菜单与 focus

移动端上稍微有些不同,毕竟所有控制——无论单击、长按抑或划动——都由接触开始,也没有鼠标的「悬停」逻辑,为了方便判定,移动端上若想激活 :hover 也是单击(触摸)。...导航栏之所以不直接显示而是放进下拉菜单,也是为了移动端等小尺寸设备显示得优雅一点,因此这个单击判定其实是优势。...桌面端 移动端 focus 持续到失去焦点 松开进入,持续到失去焦点 hover 悬停期间 按下进入,持续到失去焦点 active 单击按下期间 触摸按下期间 综合来看,focus 是最合适。...首先,第一个坑——iOS Sasfari 浏览器中点击 与 button 时候是不会有 :focus 状态,倒是原本 PC 上表示悬停 :hover 可以点击(触摸)后被激活。...PC iOS Android focus 持续到失去焦点 默认不可用 松开进入,持续到失去焦点 hover 悬停期间 按下进入,持续到失去焦点 按下进入,持续到失去焦点 active 单击按下期间

5.4K20

【新!超详细】Figma组件属性完全指南

在过去两个月里,一直玩这个功能,这里有一个指南,涵盖了有关组件属性所有信息。 本指南将向您展示如何使用该功能以及何时有用。为了帮助您更好地理解这个主题,本文中添加了许多 GIF。...例如,创建了一个具有三种类型按钮:主要、次要和再次级。每个都有 4 种状态:启用、悬停、聚焦和禁用。此外,每个都有两个图标,一个左边,一个右边,加上一个文本标签。...例如,创建一个具有不同状态(如启用、悬停和禁用)按钮。 还有一件事,如果你想使用交互式组件,你必须使用变体。 如何在 Figma 添加属性? 第一步,您需要创建一个组件。...例如,如果要创建悬停按钮,请将其颜色从启用更改为悬停,并将其命名为悬停。您现在有一个包含两个变体变体组件集。 如何在 Figma 编辑属性?...单击详细信息图标,然后在窗口中更改名称。 更改列表变体顺序 当您单击一个实例并想要更改变体,您希望它按字母顺序排列,或者最流行变体顶部。 变体行上,单击详细信息图标。

10.9K22

AngularDart Material Design 菜单 顶

单击按钮时菜单会扩展,当选择项目或单击下拉菜单外区域,菜单会关闭。 Inputs: ariaLabel String  按钮触发器Aria标签。...closeMenuOnClick bool  如果为true,则在菜单打开单击触发按钮将关闭材质菜单。 否则,菜单已打开单击触发按钮将不会执行任何操作。...menu MenuModel  显示菜单。 popupClass String  要附加到菜单弹出窗口CSS类。 这些CSS类将被复制到弹出窗口叠加层。...当弹出窗口打开,这些类可用于叠加层中选择DOM元素。 preferredPositions Iterable  传递给材质弹出组件首选位置。...Inputs: menuItem MenuItem  MenuItem,用于定义此菜单外观和行为。 如果项目具有没有空项目组子菜单,则会通过单击悬停显示菜单。

2K20

如何使用CSS创建按钮悬停动画效果?

摘要 本文介绍了CSS创建悬停动画效果方法,包括使用 transform 、 opacity 、 background-color 、 color 等属性,以及如何使用CSS过渡或关键帧动画来创建按钮悬停动画效果...文章还提供了三个示例,展示了如何创建不同类型按钮悬停动画效果。 按钮悬停动画效果属性 transform − 这个属性允许您对元素进行缩放、旋转或平移。...使用CSS创建按钮悬停动画效果 按钮悬停动画是为网站增加视觉吸引力好方法。要使用CSS创建按钮悬停动画效果,我们通常使用 :hover 伪类选择器与CSS过渡或关键帧动画相结合。...示例1 - 悬停放大 在这个示例按钮将具有蓝色背景和白色文本。当鼠标指针悬停按钮按钮将使用 transform 属性以平滑过渡0.5秒内缩放20%,背景颜色将变为绿色。...底部属性设置为0,意味着按钮位于其容器底部。当鼠标指针悬停按钮,底部属性将增加到20px,导致按钮0.5秒内以平滑过渡向上滑动。

19010

:before 和 :after多用途实践 — 特效篇(3)

: none; /* 标准文本,没有文本装饰,主要是取消a标签下划线 */ text-transform: uppercase; /* 元素文本全部转为大写...transform: translateX(-50%) translateY(-50%); } /* 匹配鼠标悬停在元素上元素之后插入内容 */ .animBtn.btnA:hover:after...接着是实现效果.animBtn:hover 和 .animBtn.btnA:hover:after 这两个选择器下面写就是了,分别是鼠标悬停在元素上会有的样式 和 鼠标悬停在元素上生成元素会有的样式...这次多说一句transition,它使得CSS属性值一段时间内平滑过渡 具体参考 http://www.runoob.com/cssref/css3-pr-transition.html...总结 简单理解这次效果就是,生成一个元素当背景,让这个背景,漂亮显示出来就行了,这是第三篇,讲用伪元素做特效了,而这些还远远只是比较简单而已,始终认为,CSS没有想象那么简单,好玩东西,还有很多

1K20

Web元素定位工具-ChroPath

ChroPath面板滚动以查看所有生成选择器。 4.要评估XPath / CSS,请输入XPath / CSS查询,然后按Enter键。 输入后,它将在DOM查询相关元素/节点。...5.如果将鼠标悬停在ChroPath选项卡任何匹配节点上,则绿色/蓝色虚线轮廓将转换为点缀橘红色,以突出显示网页相应元素。...6.如果找到元素不在网页可见区域中,则将鼠标悬停在ChroPath面板“找到”节点上,该元素将在可见区域中滚动,并带有点缀橙红色轮廓。...7.如果找到元素未突出显示但可见,则将鼠标悬停在ChroPath选项卡上匹配节点上,它将突出显示带有点缀橙红色轮廓元素。 8.只需单击复制图标即可复制定位器。...9.如果要编辑任何定位器,请单击“编辑”图标。 脚本录制 点击ChroPath选项卡打开主面板按钮: 脚本录制主界面 页面元素操作,脚本展示独立窗口 脚本下载至本地

2.3K10

按钮样式正确方式

本教程,我们将为和元素以及一个自定义.btnCSS组件创建基本样式。 你会在这个过程每一步中找到一个演示页面。...CSS组件是一种风格或样式集合,我们可以使用类来应用,通常在几种不同类型HTML元素之上。 您可能熟悉Bootstrap或Foundation等CSS框架这个概念。...悬停(hover),焦点(focus)和活动(active)样式 很酷,你按钮看起来不错,但是...用户将与它进行交互,并且当按钮状态改变,他们需要视觉反馈。...处理focus样式 还有一个棘手问题。 多个浏览器,当您单击链接或按钮,将应用两个伪类: :active :focus 一旦停止按下鼠标按钮或触控板,“active”伪类就会停止应用。...但在某些浏览器,focus样式会一直保留,直到用户点击页面上其他内容为止。 测试,受影响浏览器包括Chrome(66),Edge(16)和Firefox(60,仅用于链接)。

3.6K20

Google earth engine——导入表数据

单击选择按钮并导航到包含本地文件系统上 Shapefile Shapefile 或 Zip 存档。选择 .shp 文件,请务必选择相关 .dbf、.shx 和 .prj 文件。...用户文件夹为表提供适当资产 ID(尚不存在)。单击“上传”开始上传。 图 1. Asset Manager Shapefile 上传对话框。...将显示类似于图 2 上传对话框。单击SELECT按钮并导航到本地文件系统上 .csv 文件。为该表指定一个唯一、相关资产 ID 名称。单击“确定”开始上传。 图 2....电子表格应用程序准备表格,这是一个重要考虑因素,其中通常将缺失数据表示为 NA、Null、None、--等。缺失数据情况下,将“单元格”留空。...跟踪上传进度 开始上传表格后,“资产摄取”任务将添加到任务管理器,位于代码编辑器右侧“任务”选项卡下。单击?检查上传状态。将鼠标悬停在任务上出现图标。要取消上传,请单击任务旁边旋转图标 。

21810

路径复制

对于每个命令,可以单击命令左侧以为其选择一个图标(1),并选择该命令是出现在主上下文菜单还是出现在子菜单(或同时出现在这两个菜单)(2)。 命令列表(3)右侧按钮可用于进一步操作命令。...最后,窗口底部三个按钮(7)将保存修改设置(OK),放弃它们(取消)或保存当前修改,同时保持窗口打开(Apply)。 选项标签 ?...有关每个选项说明,将鼠标悬停在每个选项上,将显示工具提示。 一个强大选项是使用正则表达式执行查找/替换操作。选择此选项后,可以通过单击“测试...”按钮(1)来测试输入正则表达式。 ?...单击此对话框“确定”按钮会将修改后参数保留在父自定义命令对话框专家模式下编辑自定义命令可释放其全部潜能,但要付出更多技术用户体验代价。...专家模式对话框每个元素都通过工具提示进行记录。只需将鼠标悬停在元素上即可显示其工具提示。 路径复制复制附带了可在定制命令中使用各种类型管道元素。当按下“新元素”按钮,将显示它们。 ?

3.4K30

如何在Ubuntu 16.04上安装和保护Grafana

单击屏幕左上角小Grafana徽标以显示应用程序主菜单。然后,将鼠标悬停在管理按钮上以打开第二组菜单选项。最后,单击“配置文件”按钮。...[个人资料页面] “ 名称”,“ 电子邮件 ”和“用户名”字段输入您要使用姓名,电子邮件地址和用户名,然后单击“信息”部分“ 更新”按钮以保存设置。...最后,通过单击页面底部“更改密码”按钮更改与您帐户关联密码。旧密码字段输入您当前密码admin,然后New Password和Confirm Password字段输入您新密码。...如果您已登录Grafana,请单击屏幕左上角小Grafana徽标,将鼠标悬停在您用户名上,然后单击名称右侧显示辅助菜单“注销”。...登录页面上,您将看到原始登录按钮下带有GitHub徽标的GitHub按钮。 [登陆界面] 单击GitHub按钮,您需要确认您授权。 单击绿色授权按钮

3.3K40

利用UIRecorder做页面元素巡检

可以通过辅助工具栏优化录制效果,目前支持功能有:添加悬停、添加断言、使用变量、执行 js、添加延迟、脚本跳转、结束录制,如下图所示: (1)添加悬停 当页面存在二级目录等类似情况,需要鼠标悬停操作...效果如图: 单次悬停:点击“添加悬停按钮,鼠标变为绿色锁定元素,单击后结束悬停。...步骤:点击“添加断言”按钮,点击需要断言 DOM 节点,页面会弹出添加断言窗口,弹窗输入相关信息,点击确认,添加断言成功。...按钮,可在录制过程添加延迟时间,添加延迟弹窗,输入延迟时间,并执行,默认为 1000ms,如下: (6) 脚本跳转 录制过程,可录制一些公用脚本,例如:登录脚本( common/test.login.js...调用公共脚本方法:开始页面的时候输入 common/test.login.js,或者录制中间页面,点击脚本跳转,脚本跳转弹窗输入 common/test.login.js。

2.1K20

Visual Studio 调试系列2 基本调试方法

默认情况下,调试器会跳过非用户代码(如果需要更多详细信息,请参阅仅代码)。 托管代码中将看到一个对话框,询问你是否希望自动跳过属性和运算符收到通知(默认行为)。...05 导航代码(使用鼠标快速运行到代码某个点) 调试器,将鼠标悬停在代码行上,直到“运行到单击处”(将执行运行到此处)按钮 ? 出现在左侧。 ?...调试可使用“调用堆栈”窗口中“运行到光标处”。 08 快速重启应用 单击调试工具栏“重启”按钮 ? (Ctrl+Shift+F5)。...循环中运行到第2次,控制台已经第1次循环结束输出打印了内容。 此时单击调试工具栏“重启”按钮 ? (Ctrl+Shift+F5),控制台窗口关闭,立即重新开启一个新控制台窗口。...此过程速度比停止调试,然后再按下F5调试速度更快。 ? 09 使用数据提示检查变量 调试器暂停,将鼠标悬停在对象上并看到其默认属性值。

4.4K10

Windows 11第一个重大更新来了,运行安卓App 附下载

它是一个具有多项新功能大版本,与典型每月更新不同,是一个可选更新,点击“获取更新”按钮才会下载,而不会主动下载安装。...任务栏获得新功能,当您想要在 Microsoft Teams 会议期间共享应用程序窗口,Windows 11 名为“AirDrop”新功能减少了应用程序之间来回移动需要。...要开始使用,您需要将鼠标悬停在任务栏应用程序上,然后单击允许您在会议与其他人共享窗口按钮。当您共享屏幕,您可以随时单击“停止共享”按钮,或通过单击“共享此窗口”切换到另一个应用程序。...此外,微软正在为 Windows 11 任务栏引入对新静音和取消静音按钮支持。对于定期Teams上召开会议用户来说,这项新功能将派上用场。...正如上面的屏幕截图中看到,您将能够直接从任务栏访问新静音或取消静音切换。即使屏幕上打开了多个窗口,该功能也会在整个通话过程持续存在,并允许您从任何地方将 Teams 麦克风静音/取消静音。

2.4K20

简单两步,Figma制作动态交互效果按钮(附源文件)

这是一篇高级产品设计师Mike Gorrell教程,我们将在Figma通过简单几步来完成下图这样简单按钮。 ? 这个按钮有三个状态,分别是默认按钮悬停状态和按下状态。...第二,必须将悬停状态和按下状态放置原型框架外面,一遍可以随时调用它们。(这也是Figma“Overlays”功能实现方式) 第三,保持Smart Animate图层名称一致。...第2步-按下 第二步:设置“While Pressing(按下)”状态 第一步,我们已经设置好了悬停状态,接下来创建交互第二步。...第3步-单击状态 第三步:制作按钮链接(可选步骤) 为了让你按钮点击后真正有效果,我们可以在按下状态按钮上添加一个“On Click(单击)”交互效果,以便可以跳转到新页面,或者打开一个弹层以及你想要其它效果...最后总结一下,过程需要注意以下三点: 第一.按钮必须是唯一组件实例或者Frame 第二.悬停状态和按下状态必须位于原型框架之外才能起作用 第三.保持Smart Animate图层名称一致。

22.5K30

BuildAdmin17:一个按钮实现网页全屏,vue是如何做到

tab栏左侧,导航菜单栏右侧,BuilderAdmin,一个设计了7个功能模块。7个按钮分别对应是:回到首页、中英文切换、浏览器全屏、运行终端命令、清除缓存、个人信息、系统设置。...菜单栏实现先定义一个navMenus.vue,渲染导航菜单栏各个按钮。这里只是单纯定义了按钮,没有添加样式,先看看效果。添加css样之后,整体布局如下。...实现原理就是点击一下,跳转到BuildAdmin首页,也就是一个\标签。vue架构,使用router来实现跳转。在这里设计是回到/首页,也就是dashboard。...中英文切换设计,对于我来说没有什么太大作用,于是就给去掉了,打算在菜单栏后面补充一个暗黑风格切换按钮,因为设计布局问题,这个留着后面写。3. 浏览器全屏之前tabs实现时候,写过一个全屏。...,具体实现可以参考之前文章:BuildAdmin16:边栏隐藏、页面全屏,用vue是如何实现全屏组件设计在上面全屏组件上添加需要功能:<div @click="onFullScreen" class

25121

WebDriverIO教程:处理Selenium警报和覆盖

在此有关Selenium警报处理WebDriverIO教程将向您展示如何在WebDriverIO处理警报和弹出窗口以及叠加模式。...还将介绍自动化期间将要遇到各种类型警报,以及使用WebDriverIOSelenium处理警报时需要遵循关键点。...模式,通过提供特殊CSS代码使用标记来完成。单击模态以外其他位置可以关闭该模态。 叠加模态 该模式是使用客户端框架(例如,引导程序,ReactJS)构建。...没有特别的 这是叠加模式示例: 现在,您已经熟悉javascript可用另一种警报和模式。本WebDriverIO教程将向您展示有关Selenium警报处理更多信息。...警报只能通过预期操作关闭,而覆盖模式可以通过单击背景上任意位置来关闭。现在,将向您展示如何使用WebDriverIO自动执行叠加模态。 当自动化模态,您不必处理特殊代码或类。

5.8K30

Adobe Analytics贡献分析

要实施贡献分析,请按照下列步骤操作: 1、将光标悬停在趋势表或折线图中异常上,然后单击显示弹出窗口中分析,如趋势线图所示: ?...你可以将鼠标悬停在表示异常三角形上,然后单击“分析”,从趋势自由格式表异常开始“贡献分析”。“贡献分析”面板将打开,其中包含一些用于添加或删除被排除选项。...通过将排除维度拖到“排除维度”框,然后单击“设为默认值”按钮,可以教会Adobe记住这些维度。如果需要从排除列表删除维度,请单击面板“维度”按钮,然后通过单击相应X取消选择项目。...3、单击蓝色运行贡献分析按钮 ? 我们这里不做维度排除,直接运行,实际上这里可以根据经验作为一些排除,可以压缩计算报告时间。...贡献分数(介于0和1之间数字)表示维度项目的重要性-得分越高,重要性越高。但是,每个项目统计上都是有意义,因此值得对其进行全部检查。最后两列 在此表显示用于贡献分析指标和唯一身份访问者。

78840
领券