2017-09-19 17 views
0

Ich habe ein Problem, das (zumindest für mich) sehr seltsam erscheint. Es ist ein Menü, das, wenn Sie den Mauszeiger über einen Tab bewegen, seine Höhe vergrößert und die Menüpunkte anzeigt. Die Registerkarte hat die Eigenschaft Überlauf: ausgeblendet, so dass die Elemente nur angezeigt werden, wenn Sie den Mauszeiger über die Registerkarte bewegen. Nun, was ist wirklich seltsam, wenn Sie den Mauszeiger über die Registerkarte und es erweitert, die Unterseite der anderen Registerkarte scheint der Unterseite der ersten folgen - so dass die andere Registerkarte bewegt sich nach unten wie die erste erweitert. Und dieses Verhalten verschwindet, wenn ich den Überlauf entferne: versteckt! Jetzt habe ich eine Position: absolute Trickery hier, aber ich habe überprüft, dass die relevanten Teile relativ positioniert sind. Ich habe keine Ideen, was das verursachen könnte.Von Überlauf betroffene Elementposition: Versteckt


Hier ist ein sehr minimal Testfall:

HTML

<div id="menu"> 
    <div class="menu-tab">Hover here!</div> 
    <div class="menu-tab">Or here!</div> 
</div> 

CSS

#menu { /* issue disappears without this */ 
    height: 15pt; 
} 

.menu-tab { 
    display: inline-block; 
    height: 100%; /* required for animation, not affecting behavior */ 
    overflow: hidden; /* this one! */ 
    background-color: rgb(0, 0, 0); 
    color: rgb(255, 255, 255); 
    transition: height 0.3s ease; 
} 

.menu-tab:hover { 
    height: 500%; 
} 

JSFiddle

Antwort

0

Verwenden Sie die vertical-align Eigenschaft auf der Registerkarte:

#menu { 
 
    /* issue disappears without this */ 
 
    height: 15pt; 
 
} 
 

 
.menu-tab { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    /* add this */ 
 
    height: 100%; 
 
    /* required for animation, not affecting behavior */ 
 
    overflow: hidden; 
 
    /* this one! */ 
 
    background-color: rgb(0, 0, 0); 
 
    color: rgb(255, 255, 255); 
 
    transition: height 0.3s ease; 
 
} 
 

 
.menu-tab:hover { 
 
    height: 500%; 
 
}
<div id="menu"> 
 
    <div class="menu-tab">Hover here!</div> 
 
    <div class="menu-tab">Or here!</div> 
 
</div>

0

Sie müssen vertical-align:top; so hinzufügen, dass die inline-block Elemente ausgerichtet bleiben.

#menu { 
 
    /* issue disappears without this */ 
 
    height: 15pt; 
 
} 
 

 
.menu-tab { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    /* THIS */ 
 
    height: 100%; 
 
    /* required for animation, not affecting behavior */ 
 
    overflow: hidden; 
 
    /* this one! */ 
 
    background-color: rgb(0, 0, 0); 
 
    color: rgb(255, 255, 255); 
 
    transition: height 0.3s ease; 
 
} 
 

 
.menu-tab:hover { 
 
    height: 500%; 
 
}
<div id="menu"> 
 
    <div class="menu-tab">Hover here!</div> 
 
    <div class="menu-tab">Or here!</div> 
 
</div>

+0

Dank! Entschuldigung dafür, Ovokuros Antwort zu akzeptieren, sie sind sich genau ähnlich, aber er war ein bisschen früher. Auch noch, warum Überlauf: versteckt Ursache dafür? – Nik

Verwandte Themen