Probléme animation sur deux eléments

Résolu/Fermé

stev - 2 mai 2014 à 11:43
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 2 mai 2014 à 15:06

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 !!

A voir également:

Probléme animation sur deux eléments
Deux comptes whatsapp - Guide
Photoshop elements gratuit - Télécharger - Retouche d'image
Deux ecran pc - Guide
Itinéraire google map entre deux adresses - Guide
Faire deux colonnes sur word - Guide

3 réponses

Réponse 1 / 3

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
2 mai 2014 à 13:49

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>

Réponse 2 / 3

stev
2 mai 2014 à 15:02

Merci beaucoup pour ta reponse, sa marcher :D

Par contre, en gros le ~ signifie "s'associe" ?

Bref merci beaucoup !

Réponse 3 / 3

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 2/05/2014 à 15:08

~ 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/

Discussions similaires

Un seul de mes écouteurs marche. Que faire ?

comment animer une soirée avec 30 personnes à table ?

2 comptes facebook avec même mail et même nom

Un seul de mes écouteurs iPhone fonctionne. Que faire ?

Une des deux oreillettes bluetooth ne marche pas

Discussions similaires

Newsletters