Html 使不透明度为0的div没有物理尺寸

我正在创建一个函数，将鼠标悬停在一个div上，这将导致另一个div出现；一个简单的、仅限于CSS的弹出窗口

但是，每当弹出式div具有

不透明度：0

时，它仍然具有物理高度和宽度，使得弹出式div下的其他div无法访问

我知道我可以使用

display:none

和

display:block

，但这将消除添加div平滑“到达”的可能性；它只会在屏幕上弹出

问题：是否有方法删除不透明度为0的div的物理维度

在my中，您会注意到，当您将鼠标悬停在

H

或

e

上时，可以显示

.iconhover

。如果您将鼠标悬停在单词的其余部分，则表示您正式将鼠标悬停在

.iconhover

上，而不是

.wishicon

，从而导致弹出窗口不显示

我希望我的问题足够清楚

HTML

<div class="qs">
    <div class="wishicon">Hello world</div>
    <div class="iconhover">Hovering...</div>
</div>

---

这当然很好，但唉，我不知道任何“幽灵”CSS属性

我会将其视为一个悬停菜单：使父项可悬停，而不是前一个同级项：

.qs:hover > .iconhover { opacity: 1; ... }

---

我有一个很棒的解决方案，我经常使用。 在不透明度为0的元素上放置指针事件：无。 它仍将具有维度，但将好像所有事件都处于非活动状态。 然后，当您希望它是不透明度：1时，将指针事件返回到auto。

---

这是使用display的次优选项：block/none，但它可以转换

可悲的是，这意味着

.iconhover

也是一个展示自己的触发器，因为他被安置在同一个父母身上。目前，我只使用了

显示：

，就解决了这个问题，但这不支持任何好的过渡效果。是的，这也是我的观察结果。当我说“那太好了”的时候我是认真的。。。我不止一次想做同样的事情，但不要让较高的

z-index

元素阻止我在较低的元素上停留。你的应用程序是什么？也许一些创造性思维会想出另一个解决方案，那就是给一些图标一个弹出窗口，解释它们的功能。也许有一些很好的jQuery解决方案，但我想用纯CSS试试。哦，我当然会尽可能多地使用CSS。我从不希望弹出窗口隐藏他们实际描述的内容。。。我个人只会将它从您悬停的元素中定位出来。虽然这确实解决了问题，但这不是一个非常“漂亮”的结果，请检查JSFIDLE：伟大的解决方案，尽管结果不是我想要的100%，但我会将其标记为已接受：）

.qs:hover > .iconhover { opacity: 1; ... }