Question

子div不使用z-index：fiddle

下一个按钮无法点击。

有什么想法吗？

<div class="animated" ng-class="{'overlay' :overLay, 'install' : install, 'request' : request, 'flash' : animate, 'add-remove' :add}">

    <div class="tooltip-content clearfix animated" >
        <div class="lesson-tour-step__header">شروع</div>


        <div class="steps">
            <a class="btn next-step-btn" href="#" ng-if="btnStepStart" ng-click="steps('start')">next  </a>
        </div>
    </div>
</div>

Answer 1

你pointer-events: none;删除了它，它会正常工作

.tooltip-content {
    opacity: 1;
    position: absolute;
    top: 50px;
    left: 177px;
    z-index: 999999 !important;
    background: none repeat scroll 0 0 #2fa0ec;
    border-bottom: 20px solid #2a3035;
    border-radius: 5px;
    color: #fff;
    font-size: 0.9em;
    line-height: 1.5;
    margin-left: -180px;
       padding: 1.5em;

    text-align: right;

    transition: opacity 0.3s ease 0s, transform 0.4s ease 0s;
    width: 360px;
    z-index:999999 !important;
}

<强> LIVE DEMO

Answer 2

pointer-events：none

元素永远不是鼠标事件的目标;但是，如果这些后代将指针事件设置为某个其他值，则鼠标事件可能会以其后代元素为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间在发送/来自后代的路径上触发此父元素上的事件侦听器。

使用z-index无法点击子div

2 个答案: