Hallo!
Ik hoop dat jullie mij momenteel verder kunnen helpen, ik loop namelijk tegen een klein probleem in CSS aan met mijn transitions. Ik heb namelijk een header gemaakt en bij een hover wil ik dat de box-shadow langzaam erbij komt dus niet als een klap in het gezicht erbij komt. Dit met het "erin komen" werkt volledig, maar ik wil ook als ik mijn muis er dan weer afhaal dat dit op de zelfde manier "eruit gaat", echter, wil dit niet lukken om het werkend te krijgen.
HTML
<li><a href="#">Naam</a></li>
<li><a href="#">Naam</a></li>
CSS
li {
list-style: none;
padding: 20px;
}
li > a {
padding: 10px 20px;
color: #929292;
text-decoration: none;
}
li > a:hover,
li > a:focus {
box-shadow: inset 0 -3px 0 0 #ff7600;
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
color: #ff7600;
border-color: orange;
}
Ik hoop dat iemand hier mij verder op weg kan helpen ermee.
Bedankt, Laurent.