Question

我有一些设置...其中工具提示出现在悬停...所以我必须将工具提示和锚标签放在相同的div ...工具提示指针事件设置为无..但我不能设置指针事件容器div为none，因为那时没有检测到Hover事件......但是我希望工具提示下面的底层元素可以点击...请帮助我（如果可能的话）没有java脚本...我已经设置了虚拟下面的场景...还包括代码笔链接....是的...位置不可更改...在我的情况下，底层div部分可见，如下面的代码所示..我希望它是可点击的/火灾警报功能...是的，如果有其他方式通过改变联合国有序列表的组成..并将其与该容器分开请告诉我...但是工具提示应该在悬停在开关上时可见... < / p>

        <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>

下面是代码笔链接......

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

Answer 1

Check this out

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

我做的事情：

将position:relative添加到li。
删除了div内li s .menudescription以下{c}} position: absolute; right: 100%; top: 0;以下tooltip

li

这有助于将width相对于#menulist
将60px的{{1}}覆盖为padding-left并删除red container。这样可以确保componentRestrictions可以点击。

Working Code pen

如何制作容器div＆＃34;指针事件：无＆＃34;但内容可点击......？

1 个答案: