Javascript “如何制作集装箱div”；指针事件：无“；但内容可点击。。。？_Javascript_Html_Css_Navigation

Javascript “如何制作集装箱div”；指针事件：无“；但内容可点击。。。？

javascript html css navigation

Javascript “如何制作集装箱div”；指针事件：无“；但内容可点击。。。？,javascript,html,css,navigation,Javascript,Html,Css,Navigation,我有一些设置。。。鼠标悬停时工具提示出现的位置。。。所以我必须把工具提示和锚标签放在同一个分区。。。工具提示指针事件设置为“无”。。但我不能将container div的指针事件设置为none，因为没有检测到悬停事件。。。但我希望工具提示下面的基本元素是可点击的。。。请帮助我（如果可能）没有java脚本。。。我已经设置了下面的虚拟场景。。。还包括代码笔链接。。。。是的。。。位置是不可更改的…在我的例子中，基础div部分可见，如下面的代码所示。。我希望它是可点击/火灾警报功能。。。是的，如果有其他

我有一些设置。。。鼠标悬停时工具提示出现的位置。。。所以我必须把工具提示和锚标签放在同一个分区。。。工具提示指针事件设置为“无”。。但我不能将container div的指针事件设置为none，因为没有检测到悬停事件。。。但我希望工具提示下面的基本元素是可点击的。。。请帮助我（如果可能）没有java脚本。。。我已经设置了下面的虚拟场景。。。还包括代码笔链接。。。。是的。。。位置是不可更改的…在我的例子中，基础div部分可见，如下面的代码所示。。我希望它是可点击/火灾警报功能。。。是的，如果有其他方法可以改变未排序列表的组成。。把它和容器分开请告诉我。。。但工具提示应该在悬停开关上可见

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


.菜单说明{
浮动：左；
宽度：150px；
高度：30px；
文本对齐：居中；
背景色：#A1BA94；
保证金：20px 0px 0px 12px；
字体大小：20px；
线高：25px；
字体系列：“考山体”，草书；
颜色：白色；
边框：纯白2px；
不透明度：0；
指针事件：无；
}
ulli{
列表样式类型：无
}
#月经学家{
明确：两者皆有；
宽度：230px；
高度：342px；
位置：固定；
右：0；
最高：5%；
z指数：1000；
}
梅努利斯蒂姆先生{
明确：两者皆有；
高度：60px；
宽度：60px；
浮动：对；
位置：相对位置；
文本对齐：居中；
垂直对齐：中间对齐；
背景色：#A1BA94；
保证金：2倍；
垫面：4px；
}
.menulistitem:悬停+.menudescription{
不透明度：1；
}
.下伏div{
高度：200px；
宽度：50px；
背景色：红色；
位置：相对位置；
浮动：对；
利润率：20px 40px；
显示：块；
}

工具提示
工具提示
工具提示
函数myfunction（）{
警惕（“你好”）；
}

下面是代码笔链接

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

我所做的事情：

将

位置：相对添加到li


删除了div
s中的浮动li
s，并在css下方添加到.menudescription


位置：绝对位置；
右：100%；
排名：0；

这将有助于相对于li

将#menulist
的宽度覆盖为60px
，并删除相同的左侧填充。这将确保可单击红色容器

您希望显示“切换”的链接可以单击，并在悬停时显示工具提示吗？似乎在Chrome（MacOSX）上对我有效。你在使用什么浏览器/系统？我会避免重新发明轮子，而只是使用一个很酷的工具提示插件来应用于你的列表项。是的，这对我也很有用。。。但我希望底层div是可点击的。。。Masooms的解决方案对我有效：）顺便说一句，谢谢你……这正是我想要的……：）非常感谢。