Css :hover

Bonsoir,
Une toute petite question, est-il possible de modifier plusieurs DIV en un seul :hover ?

Imaginons j'ai #1 en width 50% background red et #2 en width 50% background Green.

Je veux que lorsque la souris survol le #1 donc #1:hover il prenne la valeur width 60% mais aussi que #2 lui prenne la valeur width 40%.

Merci d'avance et bonne soirée.

Hello,

Le plus facile reste à mon avis d'utiliser JS pour faire ce genre de choses. Voilà un exemple rapidos et simplifié, avec la syntaxe de jQuery (flemme). A adapter bien évidemment.

PS : si tu ne souhaites pas conserver l'animation, remplace la fonction animate() par css().
Modifié par audrasjb (09 Dec 2013 - 23:15)

Oui ou plus simplement passer par les sélecteurs d'adjacence comme ici.

Tu as parfaitement raison, Zelalsan, c'est bien plus efficace
De mon côté j'avais cru lire que l'auteur souhaitait une compatibilité max, mais non, rien du tout…

Ok, déjà merci pour tout c'est super sympa et surtout un délai super court !

Sinon pour compatibilité sur les différents navigateur ou sur les tablette ou smart phone se sera gèré quand même ? Car c'est un bon point soulève par audrasjb.

Toujours full css, et si la proximité des div's rendent cette approche possible : englober dans une div parente pour styler les éléments enfant quand celle-ci est en hover :

.parent:hover .enfant {
/* le code */
}

PS: désolé pour le code sans limitations, je suis sous smarphone.

De rien
ps: le smarphone, c'est un téléphone qui rigole ?
Modifié par 6l20 (10 Dec 2013 - 16:54)

6l20 a écrit :
De rien
ps: le smarphone, c'est un téléphone qui rigole ?

Ben... la visite du forum avec mon Samsung Galaxy Trend... pas terrible sur le plan de l'ergonomie.
Modifié par Olivier C (10 Dec 2013 - 17:44)

Super ! J'ai réussi à faire ce que je voulais. J'ai une dernière question ! Oui encore, désolé…
Est-il possible de fixer la taille d'un texte par rapport à une div qui fait 50% de l'affichage du l'écran ?
Sachant donc que la taille de l'affichage peut changer.

Merci d'avance

Olivier C a écrit :

Ben... la visite du forum avec mon Samsung Galaxy Trend... pas terrible sur le plan de l'ergonomie.

Je me moquais gentiment
Smar(t)phone, le téléphone qui s'marre...

meunier_anthony a écrit :
Est-il possible de fixer la taille d'un texte par rapport à une div qui fait 50% de l'affichage du l'écran ?
Sachant donc que la taille de l'affichage peut changer.

Oui, bien sûr, il suffit de lui donner à lui-même une largeur de XX% (pourcentage qui sera calculé sur la largeur de son conteneur).
Par contre, comme sur les grands écrans ça peut faire vraiment trop large et rendre les lignes de textes illisibles, tu devrais sans doute mettre aussi une largeur maximale (max-width, media queries, etc.).

6l20 =>
Modifié par audrasjb (10 Dec 2013 - 23:01)

bonsoir,
Alors voilà je galère quand même au final pour obtenir ce que je veux. J'ai bien essayer mais je ne trouve pas le bon code, je ne sais pas si je ne me suis pas lancer dans du trop compliqué pour moi !

je met une image en lien pour voir une ébauche de maquette :

Tout doit être à 100% de la page, je rencontre plusieurs problèmes :
http://img11.hostingpics.net/pics/750935MaquetteV3.jpg

1- avec l'animation des blocks (à 0.2 en CSS c'est bien) comme vu plus haut mais avec un survol rapides des 5 div il y a la 5eme de droite qui passe "à la ligne" même avec une div en dessous en clear:both;

2- les logos et le texte dans les div animées, j'aimerais qu'ils soient au chargement de la page comme si le trait vert de l'image soit le fond de page, puis au survol d'une div ils prennent une opacité différente et surtout qu'ils remontent vers le haut pour laisser apparaitre le texte complet…

Merci d'avance et désolé de vous embêter avec ça !
Bonne soirée en attendant.

salut,
je te réponds très rapidement. Pour ta première question, si tu pars avec des "display:inline-block" pour les div à animer, tu rajoutes à leur conteneur

overflow:hidden;
white-space:no-warp;

il faut que ce conteneur n'englobe que les div à animer.

Zelalsan a écrit :
salut,
je te réponds très rapidement. Pour ta première question, si tu pars avec des "display:inline-block" pour les div à animer, tu rajoutes à leur conteneur

overflow:hidden;
white-space:no-warp;

il faut que ce conteneur n'englobe que les div à animer.

Que la force soit avec toi !, le no-warp je ne l'avais jamais faites ni même imaginer la faire volontairement , GREAT !