CSS-Text schweben Unterstreichung Animation innerhalb von div

Ich versuche, eine Unterstreichung für ein Wort auf meiner Webseite zu animieren. Es funktioniert, aber die Unterstreichung zeigt unter dem div, dass der Text drin ist. Sie können auf dem Snippet sehen, dass das div die gesamte Anzeige füllen soll, aber jetzt müssen Sie nach unten scrollen, um die Unterstreichung zu sehen. Wie kann ich es direkt unter dem Text anzeigen lassen?CSS-Text schweben Unterstreichung Animation innerhalb von div

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    width: 50%; 
 
    height: 100vh; 
 
    text-align: center; 
 
    line-height: 100vh; 
 
    font-size: 150%; 
 
    top: 0; 
 
    -webkit-transition: font-size 0.5s; 
 
    -moz-transition: font-size 0.5s; 
 
    -o-transition: font-size 0.5s; 
 
    transition: font-size 0.5s; 
 
} 
 
div:hover { 
 
    font-size: 200%; 
 
} 
 
a { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-bottom: 3px; 
 
} 
 
a:after { 
 
    content: ''; 
 
    display: block; 
 
    margin: auto; 
 
    height: 3px; 
 
    width: 0px; 
 
    background: transparent; 
 
    transition: width .5s ease, background-color .5s ease; 
 
} 
 
a:hover:after { 
 
    width: 100%; 
 
    background: blue; 
 
}

<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); float: left;"> 
 
    <a>Webpage</a> 
 
</div> 
 
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); float: right;"> 
 
    <a>Photos</a> 
 
</div>

Quelle

2017-01-04 Tamas Koos

Die Linienhöhe der Anker wird im Parent geändert.

es auf die Standardwiederherstellung

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
div { 
 
    width: 50%; 
 
    height: 100vh; 
 
    text-align: center; 
 
    line-height: 100vh; /* this value is inherited by the a */ 
 
    font-size: 150%; 
 
    top: 0; 
 
    -webkit-transition: font-size 0.5s; 
 
    -moz-transition: font-size 0.5s; 
 
    -o-transition: font-size 0.5s; 
 
    transition: font-size 0.5s; 
 
} 
 
div:hover { 
 
    font-size: 200%; 
 
} 
 
a { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-bottom: 3px; 
 
    line-height: initial; /* added */ 
 
} 
 
a:after { 
 
    content: ''; 
 
    display: block; 
 
    margin: auto; 
 
    height: 3px; 
 
    width: 0px; 
 
    background: transparent; 
 
    transition: width .5s ease, background-color .5s ease; 
 
} 
 
a:hover:after { 
 
    width: 100%; 
 
    background: blue; 
 
}

<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); float: left;"> 
 
    <a>Webpage</a> 
 
</div> 
 
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); float: right;"> 
 
    <a>Photos</a> 
 
</div>

Quelle

2017-01-04 20:32:24 vals

Möchten Sie den Grund dafür wissen. – xxCodexx

@xxCodexx Das div hat eine Zeilenhöhe von 100vh. Das a ist innerhalb des div, also kaskadiert ** diese Einstellung, und da es ein riesiger Wert ist, setzt es die gefälschte Unterstreichung sehr niedrig. Wenn Sie es erneut auf * initial * setzen, wird der ursprüngliche Wert wiederhergestellt. – vals

Statt einen eine Halterung zu verwenden, würde ich ein div hinein setzen.

<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); float: right;"><div id="hoverDiv">Photos</div></div>

und dann in der CSS, zeigen Sie einfach den unteren Rand des div in blau auf dem Hover.

Entschuldigung, ich habe keine Zeit, den ganzen Code zu machen, aber es ist ein erster Entwurf ... hoffe, es kann dir eine gute Idee geben!

Quelle

2017-01-04 20:28:31 Helpha

drehen es auch nicht, dass die Art und Weise funktioniert. –

Will nicht mit dir streiten, aber ich bin neugierig zu wissen, warum es nicht? – Helpha

Sie können es mit dem Snippet selbst ausprobieren. Die Unterstreichung zeigt sich immer noch unter dem Hauptdiv. –

Sie flex und Hintergrund-Größe verwenden können: uns

body { 
 
    margin: 0; 
 
    height: 100vh; 
 
    display: flex; 
 
} 
 
div { 
 
    flex: 1; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
a { 
 
    padding-bottom: 3px; 
 
    background: linear-gradient(to left, currentcolor, currentcolor) bottom center no-repeat; 
 
    transition: 0.5s; 
 
    background-size: 0 3px; 
 
} 
 
a:hover { 
 
    background-size: 100% 3px; 
 
}

<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); "><a>Webpage</a> 
 
</div> 
 
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); "><a>Photos</a> 
 
</div>

können Sie auch e display: table

html { 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
html { 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 
body { 
 
    display: table-row; 
 
} 
 
div { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
a { 
 
    padding-bottom: 3px; 
 
    background: linear-gradient(to left, currentcolor, currentcolor) bottom center no-repeat; 
 
    transition: 0.5s; 
 
    background-size: 0 3px; 
 
} 
 
a:hover { 
 
    background-size: 100% 3px; 
 
}

<div style="background-color: rgb(64, 64, 64); color: rgb(255, 255, 255); "><a>Webpage</a> 
 
</div> 
 
<div style="background-color: rgb(255, 255, 255); color: rgb(64, 64, 64); "><a>Photos</a> 
 
</div>

beiden Beispiele die Pseudo verwenden können :after wenn Sie <a> zu inline-block Elemente

Quelle

2017-01-04 20:33:54

CSS-Text schweben Unterstreichung Animation innerhalb von div

Antwort

Verwandte Themen