:hover
La pseudo-classe :hover permet de spécifier l’apparence d’un élément au moment où l’utilisateur le survole avec le pointeur, sans nécessairement l’activer.
Le sélecteur :hover peut être utilisé sur tous les éléments, pas seulement sur les liens.
Vous pouvez utiliser le sélecteur :link pour styliser les liens vers les pages non visitées, le sélecteur :visited pour styliser les liens vers les pages visitées et le sélecteur :active pour styliser le lien actif.
Le sélecteur :hover s’associe à la balise pour régler l’apparence du survol.
Par exemple si p:hover {background-color: yellow;} alors le texte apparaîtra avec un fond jaune lorsqu’il sera survolé.
Les effets de hover n’ont aucune incidence sur les prototypes digitaux !
favicon
Une favicon ou favicône est une icône informatique symbolisant un site web. Les navigateurs web peuvent utiliser la favicon dans la barre d’adresse, les signets, les onglets ou encore les autres raccourcis.
Pour intégrer une favicon dans la barre de titre de la fenêtre, saisir le code html ci-dessous.
<link rel= »icon » href= »img/emoticon_36px.png »>
Cette icône avait initialement une taille de 16 × 16 ou 32 × 32 pixels. Aujourd’hui, les pages web intègrent généralement plusieurs tailles, par exemple 16 x 16, 32 x 32, 57 x 57, 60 x 60, 72 x 72, 76 x 76, 96 x 96, 114 x 114, 120 x 120, 144 x 144, 152 x 152, 180 x 180 et 192 x 192, ce qui permet à chaque navigateur d’afficher l’icône la plus adéquate en fonction de l’espace d’affichage disponible sur l’écran.
background-size: cover;
La propriété CSS background-size définit la taille des images d’arrière-plan pour l’élément. La taille de l’image peut être contrainte, complètement ou partiellement afin de conserver ses proportions.
display flex
Un outil en ligne pour comprendre les propriétés display: flex;
:hover animé
On peut ajouter une animation au hover. Pour cela, on devra définir l’animation (par exemple pour l’image « pulse ») puis paramétrer les transformations dans un sélecteur keyframes.
.pulse:hover {animation: pulse 0.5s ease-in infinite;}
@keyframes pulse{
25% {transform: scale(0.9);}
75% {transform: scale(1.1);}
}
animista.net
Animista est une bibliothèque d’animations CSS prêtes à l’emploi. Sur son interface, vous pouvez tester des animations CSS à partir des collections proposées puis télécharger le code pour les utiliser.
un tuto sur codepen – animation CSS
:hover avec une transition
En plus de signifier un état auprès de l’utilisateur, le hover peut vous permettre de révéler un objet « caché ».
Pour le html
<section>
<div class= »effet1« >
<div class= »contenu_effet1« >
<div class= »txt-1« ><h1>Survolez ici !</h1></div>
</div>
<div class= »bordureBack« ></div>
</div>
</section>
Pour le CSS
section {position: absolute;}/*Le point de départ de la position des éléments à venir*/
.effet1{
width: 300px;
height: 400px;
margin: 280px 0 0 200px;
position: relative;
z-index: 10;
}
.contenu_effet1{
padding: 30px;
width: 100%;
height: 100%;
border: 2px solid black;
word-wrap: break-word; /*césure du texte*/
background: white;
transition: 0.25s ease-in-out;
}
.txt-1, h1{
font-family: ‘Press Start 2P’, cursive;
font-size: 1.5em;
margin: 30px;
}
.txt-1{
animation: blinkcolor 3s infinite alternate;
}
/*animation des couleurs sur le texte, la transition est automatique et gérée par le navigateur*/
@keyframes blinkcolor{
25% {color: #1926e6;}
50% {color: #ff47a7;}
75% {color: #ff9679;}
100% {color: #8df3f5}
}
.bordureBack{
position: absolute;
width: 300px;
height: 400px;
border: 2px dashed black;
top: 0px;
z-index: -1; /*Les pointillés ont un z-index de —1 car sa boite apparaît en dernier dans le code html*/
}
.contenu_effet1:hover{
transform: translate(-60px, -20px);
/*cursor: grab;*/
}
ajouter un identifiant pour que le pointeur se charge d’une image
Pour le html
<section>
<div id= »img_survol » class= »effet1″>
Pour le CSS
#img_survol{
cursor: url(« ../img/logo.png »),auto;
}
images en position relative ou absolute
Consultez le site coder-coder.com/css-position-layout/ pour suivre en détails les manipulations démontrées dans la vidéo et tester les feuilles de style CSS.
:hover sur une image
Pour le html
<section>
<div class= »card card0« >
<div class= »border« >
<h2>mouvement <br>de l’image</h2>
</div>
</div>
</section>
Pour le CSS
.card{
width: 600px;
height: 400px;
margin: 460px 0 0 550px;
position: relative;
background-color: darkorange;
border-radius: 10px;
overflow: hidden; /*pour gérer le débordement du contenu à venir = https://developer.mozilla.org/en-US/docs/Web/CSS/overflow*/
display: flex;
justify-content: center;
align-items: center;
transition: background 2s;
}
/*Utiliser la propriété background pour ajuster les effets */
.card0{
background-image: url(« ../img/fleurs.jpg »);
background-repeat: no-repeat;
background-position: center;
background-size: 600px;
}
/*On constate que la position et l’échelle de l’image ont été modifiées*/
.card0:hover{
background-image: url(« ../img/fleurs.jpg »);
background-repeat: no-repeat;
background-position: center;
background-position: left;
background-size: 1200px;
}
.border{
width: 560px;
height: 360px;
background-color: transparent;
border-radius: 10px;
transition: border 1s; /*https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions*/
position: relative;
}
.border:hover{
border: 4px solid white;
}
h2{
font-family: ‘Major Mono Display’, monospace;
font-size: 3em;
color: whitesmoke;
text-transform: uppercase;
position: absolute;
top: 40px;
left: 20px;
transition: top 3s ease-in;
}
h2:hover{
top: 200px;
cursor: wait; /*https://developer.mozilla.org/en-US/docs/Web/CSS/cursor*/
}
interactivité en javascript
déplacer un élément sur l’écran
Créez un nouveau document .js, attribuez un nouveau dossier « js » au dossier racine.
Ajoutez le lien vers le javascript, la balise <script> est présente dans <body>.
<script src= »js/code.js« ></script>
Exemple 1 pour tester une fonction basique de type « alert »
Dans le html, intégrez un bouton sur lequel vous placerez une fonction « alert ».
<button onClick= »myFunc() » >Ouvrez-moi</button>
Dans le fichier .js, décrivez la fonction de « My Func ».
function myFunc(){
alert(« Vous m’avez ouvert« );
}
Exemple 2 avec un sélecteur
Utilisez un sélecteur pour déterminer plus précisément l’élément à sélectionner.
Ce sélecteur peut être .class ou #id.
Pour le html
<button id= »btn » >Ouvrez-moi encore</button>
Pour le .js
const btn = document. getElementById (« btn« );
btn. addEventListener (« click », function() {
alert (« encore gagné !« );
})
Exemple 3 pour déplacer un élément librement dans la fenêtre (draggagle)
Pour le html
<div id= »draggable »>
<div class=« ctr »>
<img src= »img/hand_hover.svg » alt= »icon hand »>
<h3>Déplacez<br>-moi</h3>
</div>
</div>
Pour le CSS
.ctr{
width: 200px;
background-color: #1926e6;
text-align: center;
cursor: move;
box-shadow: 5px 5px 20px 0px MidnightBlue;
}
.ctr img{
background-color: lawngreen;
width: 100%;
position: relative;
padding: 15px 30px;
}
h3{
font-family: ‘Press Start 2P’, cursive;
padding: 20px 10px;
color: whitesmoke;
line-height: 1.5em; /*interlignage du texte*/
}
#draggable{
position: absolute;
z-index: 20;
}
Pour le JS
// pour ajouter des commentaires dans le fichier .js
dragElement(document.getElementById(« draggable »));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id)) {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 – e.clientX;
pos2 = pos4 – e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element’s new position:
elmnt.style.top = (elmnt.offsetTop – pos2) + « px »;
elmnt.style.left = (elmnt.offsetLeft – pos1) + « px »;
}
function closeDragElement() {
//stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
ajouter un son sur le hover
la balise <audio>
Utilisée pour intégrer du son au html, elle peut contenir plusieurs sources pour fonctionner selon le navigateur :
- mp3 pour WebKit et IE
- ogg pour Firefox et Opera
On fera figurer ce lien entre les chevrons de la balise <audio> pour permettre à l’utilisateur de télécharger le son si le navigateur ne pouvait pas le lire.
<p>
Download <a href="myAudio.mp3">MP3</a> or
<a href="myAudio.ogg">OGG</a> audio.
</p>
téléchargez le dossier d’exercice
téléchargez le dossier de l’exercice finalisé