之前类似滚动文字两端变淡显示，只能通过在上面覆盖一个透明度渐变的png图片，可是这样的话，当文字滚动到图片下方时，就无法点击了。今天才知道原来css中的pointer-event属性可以解决这种情况。
pointer-events:auto;——这是默认的情况
pointer-events:none;——这样就使该层不会触发鼠标事件，可以被“穿透”
现在支持这一属性的只有Firefox 3.6+, Safari 4 和Google Chrome。
现在新浪微博上也用的这个，IE直接就忽视了。
来源：CSS pointer-Events To Allow Clicks On Underlying Elements
分享到：
相关推荐
在示例中，`.overlay`类的元素设置了`pointer-events: none`，这意味着当用户尝试点击这个覆盖层时，事件不会被这个元素捕获，而是继续向下传递到下面的链接元素。这使得用户可以点击原本被遮挡的链接。 为了实现这...
下面的这个链接上的 <code>pointer-events属性值是<code>none。点击它们，什么都不会发生。我还在“测试”链接上添加了监听器。如果<code>pointer-events的值是<code>none，对话框就不会弹出来，你可以在console里...
在CSS中，`pointer-events`属性是一个非常实用的特性，它允许开发者控制元素对鼠标交互的响应。这个属性尤其在处理复杂布局或者需要隐藏元素但又不希望它们阻止其他元素的交互时非常有用。在本文中，我们将深入探讨`...
CSS中的`pointer-events`属性是一个非常有用的工具，它允许开发者精确控制哪些图形元素可以成为鼠标事件的target。这个属性可以极大地方便前端开发者在制作各种交互元素时的复杂场景处理，尤其在处理弹层、遮罩层这...
`pointer-events` 是一个 CSS3 属性，用于控制元素如何响应鼠标和其他指针设备的交互。这个属性在处理用户界面时特别有用，特别是在有多个重叠元素或者需要阻止某些元素响应鼠标事件的情况下。通过调整 `pointer-...
MDN 上介绍为 CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。 pointer-events 属性值有: /* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: ...
CSS3中的pointer-events属性是一个非常有用的工具，用于控制指针事件（如鼠标点击、滚动、焦点事件等）是否能够触发于对应的HTML元素上。该属性允许开发者对元素的交互性进行精细的控制，甚至可以禁用特定元素上的...
在防止重复点击的场景下，我们可以先将元素的`pointer-events`设置为`none`，使其在点击后失去响应，待特定条件满足（如计时器结束或请求完成）后再恢复为`auto`。以下是一个使用`pointer-events`防止重复获取短信...
是否曾经有过这样的经历：把一个元素置于另一个元素之上，而希望下面的那个元素成为可点击的？现在，利用css的pointer-events属性即可做到。 CSS pointer-events Pointer-events原本来源于SVG，目前在很多浏览器中...
4. **使用pointer-events属性**：这是一个CSS属性，可以控制元素是否能捕获鼠标事件。将`pointer-events: none;`设置为覆盖元素，使其不可点击，然后为希望可点击的元素设置`pointer-events: auto;`。 5. **更新...
`pointer-events`属性可以控制元素是否响应鼠标点击。 - `pointer-events: none`: 阻止任何鼠标交互，元素不可点击。 - `pointer-events: auto`: 允许鼠标事件，元素可点击（默认值）。 - `pointer-events: ...
因此，可以通过动态改变Pointer Events的值来实现元素在某些条件下可点击而在其他条件下不可点击的功能。 总的来说，CSS3的Pointer Events提供了一种强大的机制，让开发者能够在HTML和CSS层面对元素的点击行为进行...
将`pointer-events`设置为`none`，可以使得元素对鼠标点击无响应，这样下拉框就不会弹出： ```css select[readonly] { pointer-events: none; } ``` 这里的`[readonly]`是CSS的属性选择器，它会选择所有`readonly...
而CSS提供了一个更简洁的解决方案——`pointer-events`属性，它允许我们通过纯CSS控制元素对鼠标事件的响应。 `pointer-events`属性是一个CSS值，用于定义元素是否应该成为鼠标事件的目标。当设置为`none`时，元素...
- 使用 CSS 的 `pointer-events` 属性：将 `pointer-events` 设置为 `none` 可以让 `div` 层不响应鼠标事件，这样点击时就不会穿透 `div` 到 `select` 元素。但是，记得在需要交互的地方恢复 `pointer-events` 的...