Appliquer un style à un élément parent au survol d'un enfant (CSS)

Appliquer un style à un élément parent au survol d'un enfant (CSS) - HTML/CSS - Programmation

Marsh Posté le 23-05-2010 à 11:26:56    

Salut,
 
Je bloque toujours sur un point en CSS.
Disons que j'ai ceci :

Code :
  1. <ul>
  2. <li>Item</li>
  3. <li>Item</li>
  4. <li>Item</li>
  5. <li>Itemdéroulant
  6. <ul>
  7. <li>Ss-Item</li>
  8. <li>Ss-Item</li>
  9. <li>Ss-Item</li>
  10. </ul>
  11. </li>
  12. </ul>


 
Je voudrais que l'aspect de "Itemdéroulant" change lorsque je survole un sous item.
 
En gros, est il possible de viser un élément parent lorsque le hover concerne un élément enfant.
Pas facile à expliquer :sweat:  
 
Par exemple pour faire un menu déroulant, il suffit de faire :
ul li ul{display:none}
ul li:hover ul li{display:block}
 
Ok.
Mais là, si je veux que lorsque le li de sous item est survolé le "Itemdéroulant" change d'aspect, je fait comment ? (disons que je le veuille en rouge).
ul li ul li:hover{} => va me mettre en forme le dernier li (sous item).
 
Merci
Je ne sais pas si j'ai réussi à être compréhensible :\

Message cité 2 fois
Reply

Marsh Posté le 23-05-2010 à 11:26:56   

Reply

Marsh Posté le 14-08-2010 à 02:11:15    

Normalement, si l'event "hover" est sur l'enfant, il est aussi sur tous ses parents.
Donc tu devrais pouvoir récupérer l'event sur le père

Reply

Marsh Posté le 14-08-2010 à 13:18:21    

Avec du JS alors, parce que cibler le parent à partir d'un event sur l'enfant je crois bien (si je me trompe tant mieux) que ce n'est pas possible en pur CSS... :spamafote:

Reply

Marsh Posté le 14-08-2010 à 13:54:14    

Oui, seul le JS permet ça je confirme après pas mal de recherches.

Reply

Marsh Posté le 31-03-2011 à 17:12:13    

Gros déterrage : j'ai le même soucis. Je pense que l'on peut y parvenir en CSS, sans JS, en utilisant le child-selector " > " (au moins sur FF).

 

Enfin du coup je galère. Je suis preneur d'une piste. :jap:


Message édité par Cver1 le 31-03-2011 à 17:13:10
Reply

Marsh Posté le 31-03-2011 à 19:19:19    

Bon et bien c'est possible. Pas pratique (quoi que je ne connais pas la méthode JS), mais possible. Un tuto sur SdZ : http://www.siteduzero.com/tutoriel [...] ontal.html

Reply

Marsh Posté le 31-03-2011 à 22:41:14    

Tu n'as pas compris le problème et ça reste du JS


---------------
Blablaté par Harko
Reply

Marsh Posté le 01-04-2011 à 03:34:40    

:heink:
 
Ça fonctionne chez moi avec le lien cité plus haut, et il n'y a pas une once de JS.

Reply

Marsh Posté le 01-04-2011 à 07:28:42    

On se la refait :  
Le monsieur veut que lorsqu'il navigue sur un enfant ça remonte à un lointain parent pour lui changer son style.  
En gros il veut dire : Si hover sur tel machin, tel autre élément tu lui change son style.
 
A moins de déclarer le :hover sur le parent qui du coup déclarera les styles sur les enfants tu ne peux rien faire d'autre.


---------------
Blablaté par Harko
Reply

Marsh Posté le 27-09-2012 à 10:55:44    

vanquishV12 a écrit :

Salut,
 
Je bloque toujours sur un point en CSS.
Disons que j'ai ceci :

Code :
  1. <ul>
  2. <li>Item</li>
  3. <li>Item</li>
  4. <li>Item</li>
  5. <li>Itemdéroulant
  6. <ul>
  7. <li>Ss-Item</li>
  8. <li>Ss-Item</li>
  9. <li>Ss-Item</li>
  10. </ul>
  11. </li>
  12. </ul>


 
Je voudrais que l'aspect de "Itemdéroulant" change lorsque je survole un sous item.
 
En gros, est il possible de viser un élément parent lorsque le hover concerne un élément enfant.
Pas facile à expliquer :sweat:  
 
Par exemple pour faire un menu déroulant, il suffit de faire :
ul li ul{display:none}
ul li:hover ul li{display:block}
 
Ok.
Mais là, si je veux que lorsque le li de sous item est survolé le "Itemdéroulant" change d'aspect, je fait comment ? (disons que je le veuille en rouge).
ul li ul li:hover{} => va me mettre en forme le dernier li (sous item).
 
Merci
Je ne sais pas si j'ai réussi à être compréhensible :\


 
YESSS !!! C'est possible !
 
Avec CSS4 the future is now : http://inserthtml.developpez.com/t [...] ions-css4/

Reply

Marsh Posté le 27-09-2012 à 10:55:44   

Reply

Marsh Posté le 27-09-2012 à 22:01:22    

vanquishV12 a écrit :

Salut,
 
Je bloque toujours sur un point en CSS.
Disons que j'ai ceci :

Code :
  1. <ul>
  2. <li>Item</li>
  3. <li>Item</li>
  4. <li>Item</li>
  5. <li>Itemdéroulant
  6. <ul>
  7. <li>Ss-Item</li>
  8. <li>Ss-Item</li>
  9. <li>Ss-Item</li>
  10. </ul>
  11. </li>
  12. </ul>


 
Je voudrais que l'aspect de "Itemdéroulant" change lorsque je survole un sous item.
 
En gros, est il possible de viser un élément parent lorsque le hover concerne un élément enfant.
Pas facile à expliquer :sweat:  
 
Par exemple pour faire un menu déroulant, il suffit de faire :
ul li ul{display:none}
ul li:hover ul li{display:block}
 
Ok.
Mais là, si je veux que lorsque le li de sous item est survolé le "Itemdéroulant" change d'aspect, je fait comment ? (disons que je le veuille en rouge).
ul li ul li:hover{} => va me mettre en forme le dernier li (sous item).
 
Merci
Je ne sais pas si j'ai réussi à être compréhensible :\


 
YESSS !!! C'est possible !
 
Avec CSS4 the future is now : http://inserthtml.developpez.com/t [...] ions-css4/
 

Code :
  1. ul! li:hover{
  2.     /* C'est la balise ul qui est sélectionnée */
  3. }


Reply

Sujets relatifs:

Leave a Replay

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