如何使容器 div "pointer-events:none" 但内容可点击...？

Question

我有一些设置...悬停时会出现工具提示...所以我必须将工具提示和锚标记放在同一个 div...工具提示指针事件设置为 none..但我无法将容器div的指针事件设置为none，因为那时未检测到悬停事件...但我希望工具提示下方的基础元素可点击...请帮忙我在没有 java 脚本的情况下退出（如果可能）...我已经在下面设置了虚拟场景...还包括代码笔 link... 是的...位置不可更改。 ..在我的例子中，底层 div 是部分可见的，如下面的代码所示..我希望它是可点击的/火灾警报功能...是的，如果有其他方式通过改变 UN-ordered 的组成列出 .. 并将其与该容器分开，请告诉我...但是悬停在开关上时应该可以看到工具提示...

        <html>

        <head>

    <style>


    .menudescription{
       float: left;
        width: 150px;
        height: 30px;

        text-align: center;
        background-color: #A1BA94;


        margin: 20px 0px 0px 12px;

        font-size: 20px;
        line-height: 25px;
        font-family: 'Kaushan Script', cursive;
        color: white;
        border: solid white 2px;
        opacity: 0;
        pointer-events: none;

    }

    ul li {
        list-style-type:none
    }


    #menulist{
        clear: both;
        width: 230px;
        height: 342px;
        position: fixed;
        right: 0;
        top: 5%;
        z-index: 1000;


    }



    .menulistitem{
        clear: both;
        height: 60px;
            width: 60px;
        float: right;
        position: relative;
        text-align: center;
        vertical-align: middle;
        background-color: #A1BA94;
        margin: 2px;
        padding-top: 4px;

    }

    .menulistitem:hover + .menudescription{
        opacity: 1;
    }


    .underlyingdiv{
        height:200px;
        width:50px;
        background-color:red;
        position:relative;
        float:right;
        margin:20px 40px;
        display:block;


    }




        </style>


            </head>
    <body>
    <div id="navbar">
        <ul id="menulist">

           <li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
                </a></div> <div class="menudescription">tooltip</div></li>

           <li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
                </a></div> <div class="menudescription">tooltip</div></li>

           <li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
                    </a></div> <div class="menudescription">tooltip</div></li></ul>
        </div>

    <div class="underlyingdiv" onClick="myfunction()"></div>




        <script>
        function myfunction(){
        alert("hello");
    }
        </script>

        </body>
    </html>

下面是码笔link...

http://codepen.io/theprash/pen/MKwWoN

Answer 1

Check this out

红色容器可点击，悬停时工具提示可见。

我做的事情：

已将 position:relative 添加到 li。
删除了 lis 内的 divs 的浮动，在 css 到 .menudescription
下方添加
position: absolute; right: 100%; top: 0;

这将有助于定位 tooltip 相对于 li
将 #menulist 的 width 覆盖为 60px 并删除相同的 padding-left。这将确保 red container 可点击。

Working Code pen

如何使容器 div "pointer-events:none" 但内容可点击...？

How to make container div "pointer-events:none" but content clickable...?

html

javascript

css

navigation