Probléme animation sur deux eléments
Résolu
Bonjour,
mon probléme est le suivant :
Je veux que sur mon sit, si je met ma souris sur le I de sin, le I devient bleu , et le mot information plus bas devien bleu.
Voila une portion du code de la page:
<h1 align="center" id="top" >
<span class="s">S</span>
<span class="i">I</span>
<span class="n">N</span></h1>
<h2 align="center" class="st"><span class="s">Systême</span><span class="i"> d'Information</span> et <span class="n">Numérique</span></h2>
Et pour le css:
.n:hover{
animation: n 200s linear 0s infinite;
-webkit-animation: n 200s linear 0s infinite;
}
@keyframes n{
from{}
1%{color: blue;}
}
@-webkit-keyframes n{
from{}
1%{color:blue;}
}
Si quelqu'un a une solution merci !!
mon probléme est le suivant :
Je veux que sur mon sit, si je met ma souris sur le I de sin, le I devient bleu , et le mot information plus bas devien bleu.
Voila une portion du code de la page:
<h1 align="center" id="top" >
<span class="s">S</span>
<span class="i">I</span>
<span class="n">N</span></h1>
<h2 align="center" class="st"><span class="s">Systême</span><span class="i"> d'Information</span> et <span class="n">Numérique</span></h2>
Et pour le css:
.n:hover{
animation: n 200s linear 0s infinite;
-webkit-animation: n 200s linear 0s infinite;
}
@keyframes n{
from{}
1%{color: blue;}
}
@-webkit-keyframes n{
from{}
1%{color:blue;}
}
Si quelqu'un a une solution merci !!
3 réponses
-
~ signifie trouve un élément situé au même niveau dans l'arborescence.
edit: de rien :) et voici de la lecture: https://css-tricks.com/child-and-sibling-selectors/ -
Merci beaucoup pour ta reponse, sa marcher :D
Par contre, en gros le ~ signifie "s'associe" ?
Bref merci beaucoup ! -
Hello !
Voila pour toi:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
.logo{
font-size: 70pt;
font-weight: bolder;
transition: all linear .3s;
}
.slogan span{
transition: all linear .3s;
font-size: 14pt;
}
.logo-s:hover{color: blue;}
.logo-s:hover ~ .slogan .slogan-s {color: blue;}
.logo-i:hover{color: blue;}
.logo-i:hover ~ .slogan .slogan-i {color: blue;}
.logo-l:hover{color: blue;}
.logo-l:hover ~ .slogan .slogan-l {color: blue;}
</style>
</head>
<body>
<div class="sil">
<span class="logo logo-s">S</span>
<span class="logo logo-i">I</span>
<span class="logo logo-l">L</span>
<div class="slogan">
<span class="slogan-s">Systèmes</span>
<span class="slogan-i">d'information</span>
<span class="slogan-l">numériques</span>
</div>
</div>
</body>
</html>
