zoukankan      html  css  js  c++  java
  • 如何使上层的div遮住的链接可以点击

    pointer-events属性

    http://www.css88.com/book/css/properties/user-interface/pointer-events.htm

    在上层的div中加入这个属性,pointer-events:none; 能很好的解决这个问题。

    pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

    默认值:auto

    适用于:所有元素

    继承性:有

    动画性:否

    计算值:指定值

    取值:

    auto:
    与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
    none:
    元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
    其他值只能应用在SVG上。

    说明:

    设置或检索在何时成为属性事件的target。
    • 使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。
    • 对应的脚本特性为pointerEvents

    兼容性:

    • 浅绿 = 支持
    • 红色 = 不支持
    • 粉色 = 部分支持
    ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
    Basic Support 6.0-10.0 2.0-3.5 4.0+ 6.0 15.0 6.0 2.1+ 18.0+
  • 相关阅读:
    geoServer的安装
    类设计原则
    零散知识点
    JavaScript setTimeOut()方法的一些疑点自己记录
    贴吧表情雨
    Laravel中tosql()是如何返回sql
    关于new static 与 new self的区别(后续有新发现,会继续更新)
    Lumen、Laravel开发问题记录
    文件实时对比,将数据组装入库(SQLITE)
    PHPSTUDY下升级mysql后无法启动
  • 原文地址:https://www.cnblogs.com/jasonxu19900827/p/5237912.html
Copyright © 2011-2022 走看看