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

当您在iPad上触摸Safari中的HTML元素时,它会变为灰色.决定嵌套元素中哪个元素以灰色显示的逻辑是什么?

当在iPad上触摸Safari中的HTML元素时,它会变为灰色。决定嵌套元素中哪个元素以灰色显示的逻辑是通过CSS中的"pointer-events"属性来控制的。

"pointer-events"属性用于指定在元素上触发鼠标事件的方式。它有以下几个取值:

  1. auto:默认值,元素会响应鼠标事件,并且会根据其它属性(如z-index)来决定元素的显示顺序。
  2. none:元素不会响应鼠标事件,鼠标事件会传递给下一层的元素。
  3. visiblePainted:元素会响应鼠标事件,并且会根据其它属性(如z-index)来决定元素的显示顺序,但是不会显示鼠标指针的变化。
  4. visibleFill:元素会响应鼠标事件,并且会根据其它属性(如z-index)来决定元素的显示顺序,同时会显示鼠标指针的变化。

在iPad上,当触摸一个元素时,Safari会将该元素的"pointer-events"属性设置为"visibleFill",使其变为灰色显示,并且响应鼠标事件。而嵌套元素中的其它元素的"pointer-events"属性如果设置为"auto"或"visiblePainted",则不会触发灰色显示效果。

需要注意的是,以上逻辑是基于默认情况下的行为,开发人员可以通过自定义CSS样式和JavaScript代码来改变元素的显示和行为方式。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

移动开发实用

不管当前有多少只手指 touchmove 手指在屏幕滑动连续触发。...通常我们再滑屏页面,会调用eventpreventDefault()可以阻止默认情况发生:阻止页面滚动 touchend 手指离开屏幕触发 touchcancel 系统停止跟踪触摸时候会触发。...不管当前有多少只手指 MSPointerMove 手指在屏幕滑动连续触发。...什么是Retina 显示屏,带来了什么问题 retina:一种具备超高像素密度液晶屏,同样大小屏幕显示像素点由1个变为多个,如在同样带下屏幕,苹果设备retina显示,像素点1个变为4...1/2,例如视觉稿40px字体,使用样式写法为20px .css{font-size:20px} 参考《高清显示屏原理及设计方案》 ios系统中元素触摸产生半透明灰色遮罩怎么去掉 ios用户点击一个链接

6.5K30

移动端web开发笔记

不管当前有多少只手指 touchmove——手指在屏幕滑动连续触发。...原因就出在浏览器需要如何判断快速点击,当用户在屏幕单击某一个元素时候,例如跳转链接,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后...retina:一种具备超高像素密度液晶屏,同样大小屏幕显示像素点由1个变为多个,如在同样带下屏幕,苹果设备retina显示,像素点1个变为4个 在高清显示位图被放大,图片会变得模糊...字体,使用样式写法为20px .css{font-size:20px} 6、ios系统中元素触摸产生半透明灰色遮罩怎么去掉 ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置...会发现所有a标签在触发点击时或者所有设置了伪类 :active 元素,默认都会在激活状态显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来进行全局禁止: html {

3.6K20
  • 移动Web学习笔记

    当你点击一个链接或者通过Javascript定义可点击元素时候,它就会出现一个半透明灰色背景,设置 -webkit-tap-highlight-color: transparent就不会产生这个背景...5. rel=”apple-touch-icon” 解释:在iPhone, iPadsafari浏览器中有个将网站添加到主屏幕按钮,网站设置了rel=”apple-touch-icon属性...,网站添加到屏幕,屏幕上会显示网站图标点击此处查看详细解释 6...., 手指从触摸移开,内容会继续保持一段时间滚动效果。...在移动设备开发过程我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应样式,但此时你会发现,该元素边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊样式

    1K30

    第135天:移动端开发经验总结

    不管当前有多少只手指 touchmove:手指在屏幕滑动连续触发。...四、常见移动端问题 1、什么是Retina 显示屏,带来了什么问题   retina:一种具备超高像素密度液晶屏,同样大小屏幕显示像素点由1个变为多个,如在同样带下屏幕,苹果设备retina...显示,像素点1个变为4个   在高清显示位图被放大,图片会变得模糊,因此移动端视觉稿通常会设计为传统PC2倍。   ...:  dooyoe@gmail.com 5、 ios系统中元素触摸产生半透明灰色遮罩怎么去掉         ios用户点击一个链接...、 禁止文本缩放 移动设备横竖屏切换,文本大小会重新计算(或者在内嵌浏览器设置字体大小),进行相应缩放,当我们不需要这种情况,可以选择禁止: html {   -webkit-text-size-adjust

    1.6K30

    第123天:移动web开发常见问题

    touchmove——手指在屏幕滑动连续触发。通常我们再滑屏页面,会调用event``preventDefault()可以阻止默认情况发生:阻止页面滚动。...touchend——手指离开屏幕触发。 touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程突然页面alert()一个提示框,此时会触发该事件,这个事件比较少用。...以下支持winphone 8: MSPointerDown——手指触碰屏幕时候发生。不管当前有多少只手指。 MSPointerMove——手指在屏幕滑动连续触发。...retina:一种具备超高像素密度液晶屏,同样大小屏幕显示像素点由1个变为多个,如在同样带下屏幕,苹果设备retina显示,像素点1个变为4个。...在做移动端页面,会发现所有a标签在触发点击时或者所有设置了伪类:active元素,默认都会在激活状态显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来进行全局禁止: html {

    1.5K20

    移动端开发需要注意事项

    1:1,并且文档最大宽度比例是1.0,且不允许用户点击屏幕放大浏览; 第二个meta标签是iphone设备safari私有meta标签,它表示:允许全屏模式浏览 第三个meta标签也是iphone...私有标签,它指定iphonesafari顶端状态条样式; 第四个meta标签表示:告诉设备忽略将页面数字识别为电话号码。...4.ios和android下触摸元素出现半透明灰色遮罩 Element { -webkit-tap-highlight-color:rgba(255,255,255,0) } 5.Retina屏...当你指定了一个块级元素,并且为其定义了边框,设置了其宽度为100%。...在移动设备开发过程我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应样式,但此时你会发现,该元素边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊样式

    42920

    9 个你不知道 CSS 伪元素

    ::first-letter伪元素 ::first-letter 伪元素允许您设置块级元素第一个字母样式。您想将特殊格式应用于段落或标题初始字符它会派上用场。...::marker 伪元素 ::marker 伪元素以列表项标记为目标,例如无序列表项目符号点或有序列表数字。使用此伪元素,您可以自定义标记外观。...例子: input::placeholder { color: #999; font-style: italic; } 在上面的代码,输入字段占位符文本将以浅灰色和斜体字体样式显示。...例子: video::backdrop { background-color: gray; } 在上面的代码一个视频元素处于全屏模式,它后面的背景将有一个灰色背景色。 9....往期推荐 5 种在 Vue 3 定义组件方法 CSSwill-change,为什么有时候能优化几十倍性能? 一个企业级文件

    26930

    手机端页面在项目中遇到一些问题及解决办法

    (1) 设置 html body 高度为百分比,margin-bottom 在 safari 里失效 (2) 直接 padding 代替 margin 4.Ios 绑定点击事件不执行?...简单说就是:go(-1): 返回一页,原页面表单内容会丢失;back(): 返回一页,原页表表单内容会保留。...类似于 history.go(-1); 而 safari(包括桌面版和 ipad 版)后退按钮则不会刷新页面,也不会提交数据申请。...// 以下支持 webkit touchstart——手指触碰屏幕时候发生。不管当前有多少只手指 touchmove——手指在屏幕滑动连续触发。...通常我们再滑屏页面,会调用 event preventDefault() 可以阻止默认情况发生:阻止页面滚动 touchend——手指离开屏幕触发 touchcancel——系统停止跟踪触摸时候会触发

    3.5K30

    H5 项目实用

    ---- 20、在Android 想不显示语音输入按钮,怎么办?...默认触摸事件 // 阻止windows Phone默认触摸事件 /*说明:winphone下默认触摸事件事件使用e.preventDefault是无效,可通过样式来禁用,如:*/ html {...autoplay属性在IOS及Android无法使用,在PC端正常 //2.audio元素没有设置controls,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间.../IE9+以及最新版本Opera都支持硬件加速,检测到某个DOM元素应用了某些CSS规则就会自动开启,从而解决页面闪白,保证动画流畅。...typeof 运算符,在使用 typeof 运算符采用引用类型存储值会出现一个问题,无论引用是什么类型对象,它都返回 “object”。

    5.3K11

    CSS 下拉菜单与 focus

    导航栏之所以不直接显示而是放进下拉菜单,也是为了在移动端等小尺寸设备显示得优雅一点,因此这个单击判定其实是优势。...不过还是有点问题,比如一台 iPad mini 这种尺寸设备,竖屏 + 鼠标情况下,但凡鼠标掠过就会调出下拉菜单;或者即便是 PC,把窗口缩小也同样是掠过频繁调出下拉菜单……毕竟是为了小尺寸设备设计而其中并非全是触摸设备...tabindex 选中 默认不显示,:focus 激活显示,很快码出几行代码。...iOS Safari 出错 是的,iOS Safari 这个错误是促成本文最主要缘故。...碰巧是,前面我们刚好设置了 tabindex,这个坑算是无意间跳过去了。 其次,一个元素被聚焦,点击一般空白处无法使它失焦。

    5.5K20

    移动端Web页面常见问题解决

    用同等比例图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?...下输入框默认内阴影 Element{ -webkit-appearance: none; } ios和android下触摸元素出现半透明灰色遮罩 Element { -webkit-tap-highlight-color...Retina屏1px边框 Element{ border-width: thin; } 旋转屏幕,字体大小调整问题 html, body, form, fieldset, p, div, h1...: preserve-3d; //设置进行转换元素背面在面对用户是否可见:隐藏 -webkit-backface-visibility:hidden; 圆角bug 某些Android手机圆角失效...(横竖屏会出现字体加粗不一致等) iOS 浏览器横屏时会重置字体大小,设置 text-size-adjust 为 none 可以解决 iOS 问题,但桌面版 Safari 字体缩放功能会失效,因此最佳方案是将

    1.8K20

    CSS 层叠上下文(Stacking Context)

    目的就是为了理清元素 Z 轴显示顺序内部逻辑。 一、现象 Z 轴显示顺序 // 穿透父级容器 z-index <!...第二层容器盒子升级为层叠上下文,红色盒子及灰色盒子 Z 轴层级受制于第二层容器盒子。 每个层叠上下文和兄弟元素独立,也就是进行层叠变化或渲染时候,只需要考虑后代元素。...层叠顺序( Stacking Order ),这个其实就是很字面的意思,它表示元素发生层叠按照特定顺序规则在 Z 轴垂直显示顺序。 层叠等级( Stacking Level ),这个很好理解了。...层叠等级就是个描述元素层叠顺序一个名词,它决定了同一个层叠上下文中元素在 Z 轴显示顺序。举个例子:A 元素与 B 元素重叠之后,A 元素在 B 元素上面。...元素处于同一层叠上下文内可按照如下规则进行层叠判断。 ? 元素层叠等级一致、层叠顺序也相同时候,在 DOM 流处于后面的元素会覆盖前面的元素

    76910

    【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

    一、案例需求 实现如下效果 , 默认状态下 , 表单显示灰色提示字体 , 点击表单输入内容是黑色字体 ; 二、案例核心要点 1、获取焦点事件 - onfocus 事件 在 JavaScript ,... DOM 元素 获得焦点 , 该 DOM 元素绑定 onfocus 事件被触发 ; 绑定该 onfocus 事件元素 一般都是 input 表单元素 ; 如 : 用户 点击输入框 或 通过键盘切换到输入框..., 该事件会被触发 ; 绑定 onfocus 事件方法 : 设置 onfocus 属性 : 可以 通过 DOM 操作 , 给元素添加 onfocus 属性 , 来指定当焦点集中在元素要执行JavaScript...function() { // 执行相关操作 }); 2、失去焦点事件 - onblur 事件 在 JavaScript , DOM 元素 失去焦点 , 该 DOM 元素绑定 onblur..., input 表单 显示 " 请输入搜索内容 " 字体是黑色 ; 鼠标点击 表单 , 此时 灰色字体 消失 , 表单显示光标 ; 此时输入内容显示是黑色字体 ; 完整执行效果如下 :

    10410

    网站都变成灰色了,它是怎么实现

    在网页端按下 F12,打开开发者模式,用元素选择器定位到 HTML 标签上,在「样式」面板往下翻,就可以看到这样一段代码。 我把它复制过来大家看一下。...然后把之前代码添加到 HTML ,然后就可以看到色系变成灰色了。 那这段代码是什么意思呢? 直接把 filter grayscale 复制到搜索引擎里看一下。...参数为 0 时候,颜色是正常。 然后依次试一下 60%: 100%: MDN 是怎么解释 grayscale() 函数呢?...It is used in the filter and backdrop-filter properties. filter 函数可以用来改变图像显示效果,用于 CSS filter 属性。...除了 grayscale 函数,可选项还有以下这些: 可以看到,目前主流浏览器版本都支持 grayscale 函数,比如说 PC 端 Chrome、edge、Firefox、Opera、Safari

    98520

    最新iOS设计规范七|10大视觉规范(Visual Design)

    启用自动隐藏后,如果用户几秒钟未触摸屏幕,指示灯就会淡出。人们再次触摸屏幕它会重新出现。此行为仅适用于被动观看体验,如播放视频或照片幻灯片。...暗模式是动态,这意味着界面位于前景(例如,弹出框或模式表),背景颜色会自动从基本颜色变为高色。该系统还使用增强背景色在多任务环境应用程序之间以及多窗口上下文中窗口之间提供视觉隔离。...级别的名称表示元素与背景之间对比度相对量:默认级别具有最高对比度,而四组(它存在)具有最低对比度。 除了四组,你可以对任何材料标签使用以下活力值。...例如:当用户使用iPad,就不要显示iPhone 提示或图标。保持与平台一致语言。你可以点击、轻击、滑动、捏和拖动触摸内容。你可以按物理按钮和内容来响应3D Touch。...某人选择较大尺寸,他们希望使自己关心内容更易于阅读;他们并不总是希望屏幕每个单词都更大。 最小化您在界面中使用字体数量。混合使用太多不同字体可能会使您应用显得支离破碎和草率。

    8.1K30

    HTML之使用Meta标签解决常见奇葩问题

    简单来讲,viewport就是浏览器,用来显示网页那一部分区域了,也就是说,浏览器实际宽度,是和我们手机宽度不一样,无论你手机宽度是320px,还是640px,在手机浏览器内部宽度,始终会是浏览器本身...下输入框默认内阴影 element{ -webkit-appearance: none; } ios和android下触摸元素出现半透明灰色遮罩 element{ -webkit-tap-highlight-color...border-width: thin; } 旋转屏幕,字体大小调整问题 html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {...-3d; /* 设置进行转换元素背面在面对用户是否可见:隐藏 */ -webkit-backface-visibility:hidden; 圆角bug 某些Android手机圆角失效 background-clip...尺寸为72*72(px) 启动画面 iOS下页面启动加载显示画面图片,避免加载白屏

    1.4K20

    最新iOS设计规范三|3大界面要素:栏(Bars)

    例如,人们查看全屏照片时,“照片”会隐藏导航栏和其他界面元素。如果你APP也用到了这个功能,切记要让用户使用简单手势(如点按)来恢复导航栏。 导航栏标题 在导航栏显示当前视图标题。...搜索栏可以单独显示,也可以显示在导航栏或内容视图中。显示在导航栏,可以将搜索栏固定在导航栏,以便始终可以调用。也可以将其折叠,当用户向上滑动展开显示。...当用户尝试关注媒体,状态栏可能会分散注意力。暂时隐藏这些元素以提供更沉浸体验。例如,当用户浏览全屏照片时,“照片”应用程序将隐藏状态栏和其他界面元素。 ? 避免永久隐藏状态栏。...通常,在iPhone使用三到五个标签;如果需要,在iPad可以接受更多一些。 人们导航到您应用其他区域,请不要隐藏标签栏。标签栏可为您应用启用全局导航,因此它在任何地方都应保持可见。...例如:在Safari,当你开始滚动页面,工具栏会自动隐藏,因为你可能正在阅读。你还可以点击屏幕底部让它再次出现。弹出键盘,工具栏也会被隐藏。 ?

    9.9K10

    WEBAPP开发技巧总结

    使用HTML5和CSS3l做UI,若还是遵循着一般web开发中使用HTML4和CSS2那样开发方式 话,这也就失去了WEBAPP本质意义了,且有些效果也无法实现,所以在此又回到了我们主题–...私有标签,它指定iphonesafari顶端状态条样式; 第四个meta标签表示:告诉设备忽略将页面数字识别为电话号码 2、HTML5标签使用 在开始编写webapp,哥建议前端工程师使用...HTML5,而放弃HTML4,因为HTML5可以实现一些HTML4无法实现丰富WEB应用程序 体验,可以减少开发者很多工作量,当然了你决定使用HTML5前,一定要对此非常熟悉,要知道HTML5...12、如何关闭iOS中键盘自动大写 我们知道在iOS虚拟键盘弹出,默认情况下键盘是开启首字母大写功能,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为 input元素提供了...在移动设备开发过程我们通常会对文本框定义为宽度100%,将其定义为块级 素以实现全屏自适应样式,但此时你会发现,该元素边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊

    2K20
    领券