Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1605 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS3] Focus sur un élément qui change le style d'un autre élément ?

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS3] Focus sur un élément qui change le style d'un autre élément ?

n°2250675
Dawa
www.shootmeagain.com
Posté le 12-02-2015 à 11:06:54  profilanswer
 

Hello à tous,
 
Je sèche un peu sur un point là. Je m'aventure dans les pseudo-classes CSS3 et suis parvenu à provoquer un changement d'état sur un autre élément CSS. Ex :  
 
 
Une petite icône hamburger typique versions mobiles  
 

Code :
  1. #menutoggle {
  2. position:fixed;
  3. right:0%;
  4. top:0px;
  5. width:12%;
  6. z-index:50;
  7. padding-top:2%;
  8. padding-bottom:2%;
  9. background-color:#333333;
  10. -webkit-transition: all 250ms linear;
  11. -moz-transition: all 250ms linear;
  12. -o-transition: all 250ms linear;
  13. transition: all 250ms linear;
  14. }


 
Un menu caché :  
 

Code :
  1. #menu {
  2. position:fixed;
  3. height:100%;
  4. width:88%;
  5. top:0px;
  6. right:-88%;
  7. z-index:50;
  8. background-color:#333333;
  9. -webkit-transition: all 250ms linear;
  10. -moz-transition: all 250ms linear;
  11. -o-transition: all 250ms linear;
  12. transition: all 250ms linear;
  14. }


 
En focus, mon hamburger se déplace  
 

Code :
  1. #menutoggle:focus {
  2. right:88%;
  3. outline:0;
  4. -webkit-transition: all 250ms linear;
  5. -moz-transition: all 250ms linear;
  6. -o-transition: all 250ms linear;
  7. transition: all 250ms linear;
  8. }


 
Mais surtout, il fait apparaître mon menu, ça marche nickel.  
 

Code :
  1. #menutoggle:focus ~ #menu {
  2. right:0%;
  3. -webkit-transition: all 250ms linear;
  4. -moz-transition: all 250ms linear;
  5. -o-transition: all 250ms linear;
  6. transition: all 250ms linear;
  7. }


 
 
 
PAR CONTRE,
 
Je voulais faire pareil avec mon champs de recherche. Donc hop une petite loupe à côté de mon hamburger
 

Code :
  1. #loupetoggle {
  2. position:fixed;
  3. right:13%;
  4. top:0px;
  5. width:12%;
  6. z-index:50;
  7. padding-top:2%;
  8. padding-bottom:2%;
  9. background-color:#333333;
  10. -webkit-transition: all 250ms linear;
  11. -moz-transition: all 250ms linear;
  12. -o-transition: all 250ms linear;
  13. transition: all 250ms linear;
  14. }


 
Un champs de recherche caché
 

Code :
  1. #mainsearchfield {
  2. position:fixed;
  3. height:15%;
  4. width:100%;
  5. top:-15%;
  6. left:0%;
  7. z-index:50;
  8. background-color:#333333;
  9. -webkit-transition: all 250ms linear;
  10. -moz-transition: all 250ms linear;
  11. -o-transition: all 250ms linear;
  12. transition: all 250ms linear;
  13. }


 
Quand on clique sur la loupe, le champs de recherche apparaît, tout va bien
 

Code :
  1. #loupetoggle:focus ~ #mainsearchfield {
  2. top:0%;
  3. -webkit-transition: all 250ms linear;
  4. -moz-transition: all 250ms linear;
  5. -o-transition: all 250ms linear;
  6. transition: all 250ms linear;
  7. }


 
Mais en voulant utiliser le formulaire, le champs remonte, puisque je n'ai plus le focus sur la loupe. Mais même en donnant le focus sur mon champs de formulaire et en y mettant ma pseudo classe, rien n'y fait, le champs remonte à sa position initiale.
 

Code :
  1. .forminputtxtall:focus ~ #mainsearchfield {
  2. top:0%;
  3. -webkit-transition: all 250ms linear;
  4. -moz-transition: all 250ms linear;
  5. -o-transition: all 250ms linear;
  6. transition: all 250ms linear;
  7. }


 
Comment régler ce problème ??  
 
Merci beaucoup !


---------------
SHOOT ME AGAIN WEBZINE
mood
Publicité
Posté le 12-02-2015 à 11:06:54  profilanswer
 

n°2250776
Dawa
www.shootmeagain.com
Posté le 13-02-2015 à 10:48:40  profilanswer
 

UP [:dawa]

n°2250843
Dawa
www.shootmeagain.com
Posté le 14-02-2015 à 10:34:37  profilanswer
 

UP PLEASE

n°2250991
Dawa
www.shootmeagain.com
Posté le 17-02-2015 à 09:24:55  profilanswer
 
n°2251159
Dawa
www.shootmeagain.com
Posté le 18-02-2015 à 16:42:58  profilanswer
 

Dawa a écrit :

Sans dec ? :o

 

:o


---------------
SHOOT ME AGAIN WEBZINE
n°2252028
Dawa
www.shootmeagain.com
Posté le 01-03-2015 à 11:19:26  profilanswer
 

:whistle:


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS3] Focus sur un élément qui change le style d'un autre élément ?

 

Sujets relatifs
Problème avec style.visibilityAjouter un style CSS à une image
JQuery> Lancer un script sur un élément créé par JQuery[CSS3] Calques à opacité de 50%, avec superposition...
Récupếrer valeur qui change dans un formulaire en JQUERYRécuperer le background d'un élément
Convertir un element d'une liste en stringThème Tumblr style magazine
menu css3 RESOLUModifier un style de page et sauvegarder
Plus de sujets relatifs à : [CSS3] Focus sur un élément qui change le style d'un autre élément ?

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.062 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR