Hallo zusammen,
ich wolltefolgenden effekt nachmachen "
Externer Inhalt
www.youtube.com
Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.
in html oder css, weswegen ich auch ohne das video zuende zu schauen schnell wusste, was ich zu tun hatte. Hat nicht funktionier,
ich habe also alles aus dem Video kopiert und das Problem blieb trotzdem.
Das ist der Code aus der index.html
HTML
<div class="nav">
<ul>
<li><a class="hover" href="index.html">Home</a></li>
<li><a class="hover" href="#">News</a></li>
<li><a class="hover" href="#">Videos</a></li>
<li><a class="hover" href="#">Contact</a></li>
<li><a class="hover" href="#">About</a></li>
</ul>
</div>
und dass der Abschnitt aus der css
header div
{
text-align: center;
}
header div ul
{
list-style: none;
/*overflow: hidden;*/
padding: 20px;
Background-color: #333;
}
header div li
{
display: inline-block;
/*margin-right: 40px;*/
/*float: left;*/
}
header div li a
{
position: relativ;
font-size: 30px;
display: block;
color: white;
padding: 14px 18px;
text-decoration: none;
z-index: 1;
}
header div li a::before
{
content: "";
position: absolut;
left: 0;
top: 0;
width: 100%;
height: 0%;
background-color: #3bb631;
transition: all 250ms;
-moz-transition: all 250ms;
-webkit-moz-transition: all 250ms;
-o-moz-transition: all 250ms;
-ms-moz-transition: all 250ms;
z-index: -1;
}
header div li a:hover::before
{
height: 100%;
}ich hoffe einer von euch findet das Problem.
Grüße ComputerCrack