Question

我正在创建一个将鼠标悬停在div上的功能，这会导致出现另一个div;一个简单的，仅限CSS的弹出窗口。

然而，每当pop-over-div有一个opacity:0时，它仍然具有物理高度和宽度，使得弹出窗口下的其他div不可达。

我知道我可以使用display:none和display:block，但这样可以消除添加顺畅＆＃34;到达＆＃34; div;它只是弹出和弹出屏幕。

问题：有没有办法用opacity:0删除div的物理尺寸？

在我的JSfiddle中，您会注意到当您将鼠标悬停在.iconhover或H上时，可以显示e。如果您将鼠标悬停在剩下的字词上，则会正式悬停在.iconhover而不是.wishicon上，从而导致弹出窗口不显示。

我希望我的问题很清楚。

HTML

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

CSS

.iconhover {
    height: auto;
    width: 100px;
    margin-left:-0px;
    color: #fff;
    background-color: #666;
    box-shadow: 0 1px 0px rgba(0,0,0,1), 0 2px 0px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,.5);
    margin-top:-20px;
    margin-left: 20px;
    border-radius: 5px;
    opacity: 0;
    font-size: 12px;
    line-height: 1.5em;
    font-weight: normal;
    transition: opacity 0.5s, margin 0.5s;
    -webkit-transition: opacity 0.5s, margin 0.5s;
    padding:4px 20px;
    text-align: center;
    position:absolute;
    float: left;
}

.qs > .wishicon:hover + .iconhover {
    opacity: 1;
    margin-top: -20px;
    margin-left: 20px
}

Answer 1

我经常使用一个很棒的解决方案。在具有不透明度的元素上：0 put pointer-events：none。它仍然具有维度，但就好像所有事件都处于非活动状态一样。然后当你想要它是不透明度：1时，将指针事件返回到auto。这是使用display的下一个最好的事情：block / none但它可以转换！

Answer 2

那肯定会很好，但唉，我不知道任何“鬼”CSS属性。

我会像悬停菜单一样对待它：让父可以移动而不是之前的兄弟：

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

使用不透明度制作div：0没有物理尺寸

2 个答案: