Les sélecteurs CSS sont descendants, et non ascendants: l'évènement "hover" doit avoir lieu sur un parent de l'objet auquel appliquer l'animation. On ne pourra donc pas appliquer d'animation au "body" sur un ":hover" d'un lien, en tous cas, en CSS pur. En javascript, pas de problème (c'est ce pour quoi javascript est fait d'ailleurs).
EDIT
D'après le draft CSS4 cité sur stack overflow, cela serait possible d'appliquer un lot de règle CSS à un élément "parent" de l'objet ayant subit l'évènement, grâce au marqueur "!" qui détermine l'élément, dans un sélecteur CSS, auquel appliquer les règles.
En temps normal, les règles s'applique sur le dernier élément du sélecteur CSS:
Grâce au "!", on peut alors dire que les règles CSS doivent être appliquées au body:
Mais ce ne sera pas avant un moment, le CSS4 étant encore en draft. Peut-être que certains navigateurs l'implémente déjà...
}
Citation :faut faire des animations css et les faire déclencher par le js, non?C'est ce que je pense être le mieux, dans le cas où l'animation est à appliquer à un objet-parent, ou en tous cas, à un objet non-enfant direct de l'objet qui porte l'évènement. Dans le cas où l'animation est appliquée à un objet enfant de l'objet qui porte l'évènement, CSS seul peut suffire, mais ce cas-ci est un peu plus annexe alors si vous voulez faire "simple", ignorez-le et utilisez javascript pour déclancher toute animation quelle qu'elle soit, et CSS3 pour l'animation en elle-même. C'est le meilleur compromis, je pense, entre performances (animations CSS3 donc optimisée) et maintenance (CSS3 pour la présentation, javascript pour l'évènementiel).
EDIT
D'après le draft CSS4 cité sur stack overflow, cela serait possible d'appliquer un lot de règle CSS à un élément "parent" de l'objet ayant subit l'évènement, grâce au marqueur "!" qui détermine l'élément, dans un sélecteur CSS, auquel appliquer les règles.
En temps normal, les règles s'applique sur le dernier élément du sélecteur CSS:
body div.class #id
{
/*Règles appliquées sur le dernier élément du sélecteur,
c'est à dire, sur le #id*/
}
body .classe
{
/*règles appliquées sur le dernier élément du sélecteur,
c'est à dire sur .classe (qui se trouve être un enfant direct ou indirect de body)*/
}
Grâce au "!", on peut alors dire que les règles CSS doivent être appliquées au body:
body! a:hover
{
/* Ces règles sont appliquées à l'objet "body" dès l'instant où ce sélecteur "body a:hover" est valide,
en d'autres mots, cela applique les règles sur le "body" au survol de n'importe quel lien contenu dans ce "body"*/
}
Mais ce ne sera pas avant un moment, le CSS4 étant encore en draft. Peut-être que certains navigateurs l'implémente déjà...
}