pointer-events 属性用于设置元素是否对鼠标事件做出反应。 默认值:none 默认值:auto 继承:无 动画:no。阅读animatable 版本:CSS3 JavaScript 语法:object.style.all="initial"尝试一下 浏览器支持 表格中的数字表示支持该属性的浏览器最低版本号。 属性 pointer-events2.011.03.64.09.0
pointer-events 属性用于设置元素是否对鼠标事件做出反应。 CSS 语法 pointer-events: auto|none; 属性值 属性值描述 auto 默认值,设置该属性链接可以正常点击访问。 none 元素不能对鼠标事件做出反应 initial 设置该属性为它的默认值,查看更多initial inherit 从父元素继承该属性, 查看更多 inherit /* 属性值 */ ...
pointer-events是CSS3中又一冉冉的属性,initial是一个值，表示初始化鼠标样式。如果设置为none就是禁用鼠标点击事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>pointer-events Example</title> <style> .clickable { width: 200px; height: 200px...
initial将此属性设置为其默认值。参阅initial。 inherit从其父元素继承此属性。参阅inherit。 鼠标禁用 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 active 状态的变化触发事件 阻止JavaScript点击动作触发的事件 cursor:not-allowed;//MDN解释:不能执行 ...
pointer-events: initial; pointer-events: unset; 其中默认属性为 auto。 当值为none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。 使用场景 抛却只适用于svg的值,说一说 none 的使用场景。 mdn上的解释不太好理解。网友叙帝利给出了一种使用场景。
html复制代码<!DOCTYPE html> Document #demo { width: 200px; height: 200px; background-color: aqua; text-align: center; line-height: 200px; } #demo:hover { background-color: bisque; } 我是测试的div const demo = document.getElementById('demo'); demo.onclick = e => ...
pointer-events: none; /* 元素永远不会成为鼠标事件的target */ /* Global values */ pointer-events: inherit; pointer-events: initial; pointer-events: unset; 1. 2. 3. 4. 5. 6. 7. 8. 案例一 看一段 css 和 js 代码,由里到外嵌套 ...
常用属性 /* Keyword values */pointer-events: auto; /* 与pointer-events属性未指定时的表现效果相同 */pointer-events: none; /* 元素永远不会成为鼠标事件的target *//* Global values */pointer-events: inherit;pointer-events: initial;pointer-events: unset; ...
pointer-events: initial; pointer-events: unset; visiblePainted 只适用于 SVG,元素只有在以下情况才会成为鼠标事件的目标: visibility 属性值为 visible,且鼠标指针在元素内部,且 fill 属性指定了 none 之外的值 visibility 属性值为 visible,鼠标指针在元素边界上,且 stroke 属性指定了 none 之外的值 ...