28112 sujets

CSS et mise en forme, CSS3

Trois colonnes qui se resizent au :hover

Bonjour!

Je viens à vous pour un problème de resize. En effet, j'ai trois jolies colonnes qui se resizent parfaitement en largeur lorsque je réduit la fenêtre de mon écran. Cependant j'aimerai qu'elles se ressizent aussi au hover.

Par exemple, je place ma souris sur la colonne 3 qui s'agrandit à 50%, tandis que les colonne 1 et 2 se réduisent à 25% chacune. J'arrive à réaliser l'effet sur ma première colonne, mais pas sur les autres...

J'ai volontairement allongé le code afin de situer mon erreur, mais je ne vois pas.


<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R°</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
        <div id="colonne1" class="colonne">
            
        </div>
        <div id="colonne2" class="colonne">
            
        </div>
        <div id="colonne3" class="colonne">
            
        </div>
</div>
    
</body>
</html>





html {
	height: 100%;
}
body {
	height: 100%;
}

#colonne1{
    background-color:black;
    transition: ease 1s;
    float:left;
}
#colonne1:hover{
    width:50%;
    background-color:black;
    transition: ease 1s;
    float:left;
}
#colonne1:hover~#colonne2{
    width:25%;
    opacity:0.2;
    transition: ease 1s;
    float:left;
}
#colonne1:hover~#colonne3{
    width:25%;
    opacity:0.2;
    transition: ease 1s;
    float:left;
}


#colonne2{
    background-color:burlywood;
    position:relative;
    float:left;
    transition: ease 1s;
}
#colonne2:hover{
    width:50%;
    background-color:black;
    transition: ease 1s;
    float:left;
}
#colonne2:hover~#colonne1{
    width:25%;
    opacity:0.2;
    transition: ease 1s;
    float:left;
}
#colonne2:hover~#colonne3{
    width:25%;
    opacity:0.2;
    transition: ease 1s;
    float:left;
}

#colonne3{
    background-color: aqua;
    transition: ease 1s;
    float:right;
}
#colonne3:hover{
    width:50%;
    opacity:0.2;
    transition: ease 1s;
    float:left;
}
#colonne3:hover~#colonne1{
    width:25%;
    opacity:0.2;
    transition: ease 1s;
    float:left;
}
#colonne3:hover~#colonne2{
    width:25%;
    opacity:0.2;
    transition: ease 1s;
    float:left;
}

.colonne{
  margin: 0;
  max-width: none;
  height: 100%; 
  max-height:100%;
  width:33.33%;
  transition: ease 1s;
}
Bonjour !

Je pense avoir compris le problème : ~ ne permet de cibler que des frères qui suivent l'élément et non des frères qui précèdent l'élément. D'où le fait que cela fonctionne avec la première colonne...

Effectivement, Flexbox est beaucoup plus simple dans ce cas (et surtout faisable).

Smiley smile
Modérateur
Bonjour Borg80,

Je ne pense pas qu'en css cela soit réalisable car cela implique de faire agir des éléments frères au survol de la souris. Eléments qui peuvent tout aussi bien se trouver avant ou après l'élément sélectionner dans le DOM.

De prime abord je penserais à une solution JS qui dirait:
"
au survol de this, remonte au parent et applique la propriété Css Scale sur tous les enfants directs de ce parents sauf this
"

Maintenant pour la partie code, je laisse la main: j'y connais rien encore au JS.

L’évènement serait déclenché par l'ajout de la propriété au sein des .colonne.

Si tu penche pour cette option, tu auras donc besoin de ceci: Developpez.com - JS: Les évènements.

Bonne chance ! Smiley smile
Greg_Lumiere a écrit :
Je ne pense pas qu'en css cela soit réalisable...

Pourtant Raphaël vient de donner une solution parfaitement viable dans une réponse juste au dessus...
Modérateur
Olivier C a écrit :

Pourtant Raphaël vient de donner une solution parfaitement viable dans une réponse juste au dessus...
Oui je n'y avais pas pensé. Toutefois, via flexbox on n'agit pas simultanément sur les deux autres colonnes.

J'ai peut-être cherché midi à quatorze heures. Smiley confus
Greg_Lumiere a écrit :
Toutefois, via flexbox on n'agit pas simultanément sur les deux autres colonnes.

Et bien si justement car il s'agit d'éléments frères qui, sous flexbox, peuvent avoir un comportement synchro. Il me semble que l'on pourait aussi réaliser l'opération en display table. Il faudrait tester (mais étant en vacances, réaliser un pen avec un smartphone est pénible...).
Modifié par Olivier C (28 Jul 2016 - 22:33)
Modérateur
Olivier C a écrit :

Et bien si justement car il s'agit d'éléments frères qui, sous flexbox, peuvent avoir un comportement synchro.
Tu veux dire que ce serait possible même si les éléments sur lesquels on veut agir sont placés dans le DOM avant l'élément survolé ?


Olivier C a écrit :
réaliser un pen avec un smartphone est pénible
Bien d'accord Smiley biggrin , je n'en demande pas tant Smiley smile
Administrateur
Greg_Lumiere a écrit :
Tu veux dire que ce serait possible même si les éléments sur lesquels on veut agir sont placés dans le DOM avant l'élément survolé ?

Oui, tu peux tester le lien que j'ai laissé dans ma réponse précédente.
Sujet clos
Aller à