Ustaw div z kryciem: 0 nie ma wymiarów fizycznych - html, css, css3

Tworzę funkcję, w której najedziesz kursorem na div, co spowoduje pojawienie się innego div; prostego pop-overu tylko CSS.

Jednak zawsze, gdy pop-over-div ma opacity:0, nadal ma fizyczną wysokość i szerokość, czyniąc inne div pod pop-over nieosiągalne.

Wiem, że mogę pracować display:none i display:block, ale usunie to możliwość dodania płynnego „przybycia” div; po prostu pojawi się i zniknie z ekranu.

Pytanie: Czy istnieje sposób na usunięcie fizycznych wymiarów div z opacity:0?

W moim JSfiddle, zauważysz, że możesz dostać .iconhover pojawiać się po najechaniu kursorem na H lub e. Jeśli zatrzymasz się nad resztą słowa, oficjalnie się zatrzymasz .iconhover i nie .wishicon, w wyniku czego okienko pop-up nie pojawia się.

Mam nadzieję, że moje pytanie jest wystarczająco jasne.

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
}

Odpowiedzi:

Mam wspaniałe rozwiązanie, którego często używam. W elemencie z kryciem: 0 ustaw zdarzenia-wskaźnika: brak. Nadal będzie miał wymiary, ale będzie tak, jakby wszystkie zdarzenia były nieaktywne. Następnie, gdy chcesz, aby była nieprzezroczysta: 1, zwróć zdarzenia wskaźnika na auto. Jest to kolejna najlepsza rzecz do używania display: block / none, ale można ją przenieść!

Z pewnością byłoby miło, ale niestety, nie jestem świadomy żadnej „duchowej” własności CSS.

Traktuję to tak samo jak menu najechania: ustaw rodzic hoverable zamiast poprzedniego rodzeństwa:

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