首页
学习
活动
专区
工具
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.4K30

移动端web开发笔记

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

3.5K20

移动Web学习笔记

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

99330

第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

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,为什么有时候能优化几十倍性能? 一个企业级文件

21230

移动端开发需要注意事项

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个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊样式

39420

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

(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.4K30

CSS 下拉菜单与 focus

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

5.4K20

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.2K11

CSS 层叠上下文(Stacking Context)

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

72210

移动端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

macOS Monterey:您可能错过 40 个提示、技巧和功能

22.现场麦克风和相机访问 当应用程序在你 ‌Mac‌ 使用相机或麦克风,一个小指示灯会出现在控制中心图标旁边菜单栏(如果你隐藏了菜单栏,它会出现在右上角桌面)。...现在,下次您在创建快速笔记单击捕获元素,您将被带到原始网页,其中突出显示元素仍然存在。您还可以通过单击突出显示来重新打开笔记。 28....您手动将窗口拖动到另一个显示器或单击并按住窗口左上角绿色交通灯以选择另一个连接显示,自动化都可以工作。...此外,您输入哈希符号,macOS 会方便地建议现有标签供您在光标下方选择。 39....如果您在 Safari 浏览仍想接收本地内容,IP 地址可以保持您大致位置而不是特定(默认设置),或者如果您希望中继更加私密,IP 地址可以简单地包括您国家和时区。 40.

4.9K30

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

在网页端按下 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

91620

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

先来感受一下变灰后效果。   这种灰色效果怎么实现呢?如何做到图片、文字、按钮都变灰效果呢?   方案 1,换一套灰色 UI,那显然成本太大了,用脚指头想一想就知道不太可能。   ...在网页端按下 F12,打开开发者模式,用元素选择器定位到 HTML 标签上,在「样式」面板往下翻,就可以看到这样一段代码。   我把它复制过来大家看一下。   ...然后把之前代码添加到 HTML ,然后就可以看到色系变成灰色了。   那这段代码是什么意思呢?   直接把 filter 复制到搜索引擎里看一下。   参数为 0 时候,颜色是正常。   ...filter 函数可以用来改变图像显示效果,用于 CSS filter 属性。...除了 函数,可选项还有以下这些:   可以看到,目前主流浏览器版本都支持 函数,比如说 PC 端 Chrome、edge、、Opera、Safari 等等,除了 IE。

87730

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

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

7.9K30

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.3K20

VueJs如何使用Teleport组件

前言 在DOM结构相对比较复杂,层级嵌套比较深组件内,需要根据相对应模块业务处理一些逻辑,该逻辑属于当前组件 但是从整个页面应用视图上看,它在DOM应该被渲染在整个vue应用外部其他地方,不能影响组件结构...比较常见应用场景:就是全屏模态框,控制元素位置,也是可以处理,但是比较麻烦 在理想情况下,我们希望在具体组件,给元素绑定事件,与具体要控制DOM元素结构在同一个组件,具体位置处,保持一定相关联性...,里面存在着控制弹框显示和隐藏逻辑,嵌套组件比较深,复杂 如果父级元素存在定位,那在控制子元素位置,用csstransform或者position:absolute,参照对象变更,会破坏布局结构...这也意味着来自父组件注入也会按预期工作,子组件将在 Vue Devtools 嵌套在父级组件下面,而不是放在实际内容移动到地方 位置移动了,提现在结构模板,但是数据逻辑依旧存在关联 04 如何禁用..."content"> A B 总结 这个teleport组件在实际开发还是很实用,能够解决组件嵌套层级很深,而后代组件模板,

2.3K20
领券