使用pointer-events禁用某个元素的:hover

刚才在改一个左侧导航，要求第一行是栏目名，下面的是子导航。子导航当然是有hover的，栏目名是写死的。

当然可以用jQuery来做辣，但是搜了搜发现css3有相应的属性pointer-events。

pointer-events语法：

• pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
• 默认值： auto

pointer-events取值：
对于浏览器来说，只有auto和none两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG)。

pointer-events作用（值为none时）：

• 阻止用户的点击动作产生任何效果
• 阻止缺省鼠标指针的显示
• 阻止CSS里的 hover 和 active 状态的变化触发事件
• 阻止JavaScript点击动作触发的事件

回归题目，贴一下代码：

<nav class="menu col-lg-3" data-ride="menu" style="width: 300px">
    <ul id="treeMenu" class="tree tree-menu menu-back" data-ride="tree">
        <li class="col-title">
            <a href="www.baidu.com">政策法规</a>
        </li>
    </ul>
</nav>

.col-title {
    pointer-events: none;
}

此时这个“政策法规”的a标签不会有点击事件，也没有鼠标小手。
同时我在li上设置了hover：

.tree li:hover {
    background-color: #E0F0FF
}

“政策法规”上也是没有效果的。

---

    <div class="col-lg-3 box">
        <div class="box-list_title">练习</div>
        <div class="box-list_content">
            <div class="bottom">
                <a href="www.baidu.com">一个链接</a>
            </div>
            <div class="top"></div>
        </div>
    </div>

.bottom {
    background: #aaabb2;
    width: 100px;
    height: 100px;
}

.top {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
}

此时灰色的层覆盖在a标签上方，导致不能点击a标签

而在top上加上属性pointer-events:

.top {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

这时鼠标将穿过灰色层指向它下面的元素