Positionner une div dynamique en position absolue

Me revoici dans une nouvelle aventure,

On m'a toujours appris que c'était mal de dire du mal de son code, et qu'en règle générale, le problème se trouvait généralement entre la chaise et le clavier, et c'est pourquoi aujourd'hui je fais à nouveau appel à vous pour voir à quel niveau j'ai m*rdé...

J'ai donc une jolie petite photo de chaussure avec en dessous, son prix ainsi qu'une pastille pour définir les différentes couleurs disponibles. J'aimerais beaucoup qu'au survol sur les différentes pastilles, une petite image avec la chaussure d'une autre couleur apparaisse à côté de la vignette...

J'ai donc écrit ça :

    <li><p>Bottes Angela</p><a class="zoombox" href="grandes_photos/angela_noir.jpg" title="description"><img src="../modeles/photos/bottes/vignettes/angela_noir.JPG" alt="Bottes angla noires" title="bottes angela noires"></a><br><span>79€</span>
        <img class="color" src="../modeles/photos/bottines/vignettes/color_black.png" alt="couleurs disponibles : noir" title="couleurs disponibles : noir">
        <img class="other" src="../modeles/photos/bottes/vignettes/angela_noir.jpg" alt="modele noir"></li>

(En effet, dans l'exemple, les deux photos sont les mêmes, mais c'est juste pour le test)

Et en CSS :

   .other {
            display: none;
        }

       .color:hover .other {
            display: block;
        }

Je sais que bourde il y a... mais voilà, je n'y vois pas plus loin que le bout de mon nez !
Si quelqu'un avait également une proposition de solution (simple) en JS, je lui serais d'une reconnaissance éternelle... tout ce que j'ai essayé jusqu'ici était vraiment ardu à mettre en place...

Voilà, merci à vous pour votre aide si précieuse, la Kiwinauté !
Modifié par Dakota (08 Jul 2014 - 13:11)

Tu dois écrire :

.color:hover + .other {
  display: block;
}

Simplement parce que l’image « .other » n’est pas un enfant de « .color » mais un élément adjacent.

Bonne continuation

Oh, merci beaucoup, ça fonctionne !
Je n'aurais jamais trouvé toute seule, c'est super
Encore merci !

Me re-revoici !!

J'ai donc réussi à faire ce que je voulais avec mes petites pastilles de couleurs et mes photos.
Nous avons donc, au survol sur les pastilles de couleurs, une photo de chaussure qui apparaît
Maintenant, j'ai encore un petit souci !



Mes petites images, en position "absolue", apparaissent un peu en dessous des photos de base, mais cela pose un problème au niveau des dernières photos... j'aimerais que celles-ci se positionnent juste quelques pixels plus haut, histoire de ne pas dépasser...

Pour cela, j'ai créé une class "bottom" sur les images en questions. Je les ai positionnées en relative, et demandé à ce qu'elles se placent 50px plus haut (par exemple). Cela ne fonctionne pas, car mon code ne veut rien entendre, et c'est toujours la class "other" (celle qui fait apparaître les vignettes en dessous) qui prend le dessus. La seule solution que j'ai trouvé est de mettre une id #bottom à la place d'une class, mais cela m'ennuie car j'ai 5 photos dans ce cas...

Même avec l'attribut !important, ça ne fonctionne pas

J'ai pensé positionner les images par dessus la photo de base, pour qu'elles se superposent. Cela dit, la position "absolute" nécessite un placement précis dans la page... Si je ne m'abuse, je ne peux pas dire à ma vignette "place toi 20px plu haut que ton placement initial" avec une position absolue... Me trompe-je ?

Je suis un peu perdue, et je rame... quelqu'un de super sympa a t-il une idée lumineuse ?
Modifié par Dakota (08 Jul 2014 - 13:24)

Tu as essayé avec un margin négatif ?

genre margin-top:-20px;

@daouahyo : excellent, ça marche !!
Par contre, je ne comprends pas pourquoi ça ne marche qu'en négatif ?
J'ai mis margin-top : -100px; Pourquoi avec margin-bottom : 100px, ça n'a pas le même effet ?

En tout cas merci énormément. J'ai souvent des problèmes faciles à résoudre, au final xD

Dakota a écrit :
@daouahyo : excellent, ça marche !!
Par contre, je ne comprends pas pourquoi ça ne marche qu'en négatif ?
J'ai mis margin-top : -100px; Pourquoi avec margin-bottom : 100px, ça n'a pas le même effet ?

En tout cas merci énormément. J'ai souvent des problèmes faciles à résoudre, au final xD

Heureux d avoir pu t aider ^^
Pour le margin-bottom j'ai souvent eu également des soucis, as tu remis par défaut dans ta feuille de style les padding et margin :

* { padding:0; margin:0; }