如何使容器div“指针事件：无”但内容可点击...？

Question

我有一些设置...工具提示出现在悬停时...所以我必须将工具提示和锚标记放在同一个 div 中...工具提示指针事件设置为无..但我无法设置容器的指针事件div 为无，因为未检测到悬停事件...但我希望工具提示下方的底层元素可单击...请帮助我（如果可能），无需 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>

下面是代码笔链接...

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

Answer 1

.menudescription {
  width: 150px;
  height: 30px;
  text-align: center;
  background-color: #A1BA94;
  position: absolute;
  right: 100%;
  top: 0;
  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;
  position: relative;
}

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

.menulistitem {
  height: 60px;
  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;
}

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

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

我做的事情：

已将
```
position:relative
```
添加到
```
li
```
。

删除了

div

内

li

的浮动，在CSS下方添加到

.menudescription

   position: absolute;
   right: 100%;
   top: 0;

这将有助于定位

tooltip

相对于

li

将
```
width
```
中的
```
#menulist
```
覆盖为
```
60px
```
，并删除
```
padding-left
```
。这将确保
```
red container
```
可点击。

工作代码笔

如何使容器div“指针事件：无”但内容可点击...？

问题描述投票：0回答：1

1个回答

最新问题

如何使容器div“指针事件：无”但内容可点击...？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1