Hover et delay en CSS
Découvrez l'exemple
<div class="container"> <div class="btn">Bouton hover</div> <div class="content"> Porta nunc velit augue? Et? Odio egestas sit, et lacus aenean magna purus hac nec aenean? Enim tincidunt phasellus sociis integer pulvinar! Augue montes, porttitor nisi, ultrices et urna sit, tempor urna enim eros arcu urna, nec ridiculus risus ac, mauris massa scelerisque eu, natoque, nisi montes cras, nec! Sagittis </div> </div>
.container .content{ display:none; background:#300; padding: 50px; color:#FFF; } .container .btn{ background:#F00; color:#FFF; padding: 10px 20px; display:inline-block; } .container .btn:hover + .content{ display: table; -webkit-animation: hover 1s ease-in-out; animation: hover 1s ease-in-out; } @-webkit-keyframes hover { 0% { opacity: 0; filter: alpha(opacity = 0); } 70% { opacity: 0; filter: alpha(opacity = 0); } 100% { opacity: 1; filter: alpha(opacity = 100); } } @keyframes hover { 0% { opacity: 0; filter: alpha(opacity = 0); } 70% { opacity: 0; filter: alpha(opacity = 0); } 100% { opacity: 1; filter: alpha(opacity = 100); } }
Bibliothèque de codes
Vous avez un projet internet ? Vous avez besoin d'assistance pour votre site existant ?
Nous sommes à votre écoute pour étudier vos besoins et vous proposer les meilleurs solutions ! Contactez-nous par téléphone ou décrivez-nous votre projet à l'aide de notre formulaire de demande de devis en ligne ! Nous prendrons contact avec vous très rapidement.