Objectifs
- Connaitre les méthodes
animate() - Etre capable d'animer des modifications apportées aux propriétés CSS
- Connaitre les méthodes
Application01
Énoncé
- Vous pouvez visualiser l'énoncé de l'application
Solution
Code HTML
<!doctype html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script type = "text/javascript" src = "application02.js"></script> <link type="text/css" rel="stylesheet" href="application02.css"> </head> <body> <ul> <li><a href="#" data-color="deepskyblue">Deepskyblue</a></li> <li><a href="#" data-color="seagreen">Seagreen</a></li> <li><a href="#" data-color="blueviolet">Blueviolet</a></li> <li><a href="#" data-color="deeppink">Deeppink</a></li> <li><a href="#" data-color="peru">Peru</a></li> <li><a href="#" data-color="firebrick">Firebrick</a></li> <li><a href="#" data-color="#f06d06">#f06d06</a></li> </ul> <h2>Changement de couleur</h2> </body> </html>
Code CSS
body { background:crimson; transition: .6s; } h2{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; font-size: 50px; text-transform: uppercase; color: #fff; font-family: merienda; } ul{ margin-top: 80px; } ul li{ display: block; width: 100px; text-align: center; padding: 10px 25px; height: 40px; border : 3px solid #fff; margin: 15px 0; } ul li a{ color: #fff; font-size: 15px; line-height: 36px; text-decoration: none; font-family: poppins; text-transform: uppercase; font-weight: bold; }Code JS
$(function() { $("ul li a").hover(function(){ var ddd=$(this).attr("data-color"); $("body").css("background",ddd); }); });