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

Focus sur un élément qui change le style d'un autre élément ? [CSS3] - HTML/CSS - Programmation

Marsh Posté le 12-02-2015 à 11:06:54    

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
Reply

Marsh Posté le 12-02-2015 à 11:06:54   

Reply

Marsh Posté le 13-02-2015 à 10:48:40    

UP [:dawa]

Reply

Marsh Posté le 14-02-2015 à 10:34:37    

UP PLEASE

Reply

Marsh Posté le 17-02-2015 à 09:24:55    

Reply

Marsh Posté le 18-02-2015 à 16:42:58    

Dawa a écrit :

Sans dec ? :o

 

:o


---------------
SHOOT ME AGAIN WEBZINE
Reply

Marsh Posté le 01-03-2015 à 11:19:26    

:whistle:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed