18008 sujets

Questions générales et questions de débutants

Problème menu hover

Bonjour à tous,

Je suis débutant et j'ai un soucis avec un menu.
J'ai deux blocs (cf image). J'aimerais que lors d'un "hover" bloc 1, il bouge de 50 px vers la droite et que le bloc 2 suive sur la droite. Et que lors d'un "hover" bloc 2, il bouge seul de 50 px vers la droite.

Le bloc 1 et par dessus le bloc 2.
Mon animation marche lorsque le bloc 1 est dessous le bloc 2 mais pas l'inverse.
Pouvez-vous m'aider ?

Voici le code actuel :


<html>
<head>

<style>
   #u2{
 
      transition-property: left;
      transition-duration: 0.4s;
      transition-timing-function: ease;
 
      -webkit-transition-property: left;
      -webkit-transition-duration: 0.4s;
      -webkit-transition-timing-function: ease;
   }

   #u1:hover ~ #u2{
      left:50px;

</style>
</head>
</html>

<html>
<head>

<style>
   #u1{
 
      transition-property: left;
      transition-duration: 0.4s;
      transition-timing-function: ease;
 
      -webkit-transition-property: left;
      -webkit-transition-duration: 0.4s;
      -webkit-transition-timing-function: ease;
   }

   #u1:hover {
      left:50px;

</style>
</head>
</html>

<html>
<head>

<style>
   #u2{
 
      transition-property: left;
      transition-duration: 0.4s;
      transition-timing-function: ease;
 
      -webkit-transition-property: left;
      -webkit-transition-duration: 0.4s;
      -webkit-transition-timing-function: ease;
   }

   #u2:hover {
      left:50px;

</style>
</head>
</html>


J'espère être assez clair !
Merci par avance pour votre aide
Bonjour,
Je suis également un nouveau et j'ai le même problème!!
Qu'est ce qu'on doit faire pour résoudre le problème?
Merci Smiley smile
De 1. il y a trois fois la même chose, de 2. ferme la règle pour le #u2, de 3., où sont tes balises avec l'ID #u1 et #u2 ? Et enfin, pour les fois prochaines, n'utilise plus les ID pour styliser tes éléments HTML.
Modérateur
Hello,
Marrant d'avoir le problème qui est vraiment si spécifique… Vous êtes étudiant ?
Soldat8889 a écrit :
De 1. il y a trois fois la même chose, de 2. ferme la règle pour le #u2, de 3., où sont tes balises avec l'ID #u1 et #u2 ? Et enfin, pour les fois prochaines, n'utilise plus les ID pour styliser tes éléments HTML.


Merci pour ta réponse !
1. La première est censé pousser le bloc 2 en hover sur le bloc 1.
La deuxième est censé déplacé le bloc 1 en hover sur le bloc 1.
La dernière est censé déplacé le bloc 2 en hover sur le bloc 2.

2. En effet, je viens de fermer les règles dans mon code

3. Les balises sont présentes mais pas dans mon message.

Sait-tu pourquoi je n'ai aucun soucis lorsque je fais un hover sur #u2 (qui est dessous le bloc 1) qui bouge #u1 (qui est dessus le bloc 2) et que quand je fais un hover sur #u1 (qui est dessus le bloc 2) qui bouge #u2 (qui est dessous le bloc 1) cela ne marche plus ?

Je suis encore débutant dans le code, désolé si je ne m'exprime pas avec les bon termes !
Yordi a écrit :
Hello,
Marrant d'avoir le problème qui est vraiment si spécifique… Vous êtes étudiant ?


Non pas du tout Smiley smile
Sujet clos
Aller à