Hover qui ne marche pas

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Hover qui ne marche pas

Message par Melodiam le Ven 30 Juin 2017 - 23:25

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://hells-kitchen.forumactif.com/t24-le-bestiaire#85

Description du problème

Bonsoir !!! Smile


Voilà j'ai un petit souci avec un des codes que je travaille...
Lorsqu'on survole l'image, on doit voir apparaître le bloc blanc avec le texte.
Or là, comme vous pouvez le voir en cliquant sur le lien qui vous amène au poste, on voit directement le bloc/texte et l'image est en dessous.

Je n'arrive pas à voir d'où ça vient, si mon opacité est mal réglée ou quoi...

Voici le code en entier :
Code:
<style>.kisseu {  opacity: 0; width: 250px; height: 330px; transition-duration: 0.5s;  -moz-transition-duration: 0.5s;  -webkit-transition-duration: 0.5s;  -o-transition-duration: 0.5s; }.kisseuu {  width: 250px; height: 330px; }.kisseu:hover { opacity: 3; -moz-transition-duration: 0.5s;  -webkit-transition-duration: 0.5s;  -o-transition-duration: 0.5s; }.kisseua { width: 200px; padding: 5px; background-color: #fff; font: 9px; font-weight: 100; letter-spacing: 1px; color: #000; text-align: center; text-transform: lowercase; }.kisseub { width: 200px; height: 250px; padding: 5px; background-color: #fff; font: 9px; font-weight: 100; letter-spacing: 0px; color: #000; text-align: justify; text-transform: lowercase; overflow: auto; }</style>

<div style="padding: 20px; height:900px; overflow-y:scroll; overflow-x:hidden; overflow: auto;"><table><td><div style="background-image: url(https://img4.hostingpics.net/pics/271403bestiairetest.png); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td><td><div style="background-image: url(http://placehold.it/250x330/121212/f31352); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td></table>
<table><td><div style="background-image: url(https://img4.hostingpics.net/pics/271403bestiairetest.png); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td><td><div style="background-image: url(http://placehold.it/250x330/121212/f31352); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td></table>
<table><td><div style="background-image: url(https://img4.hostingpics.net/pics/271403bestiairetest.png); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td><td><div style="background-image: url(http://placehold.it/250x330/121212/f31352); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td></table>
<table><td><div style="background-image: url(https://img4.hostingpics.net/pics/271403bestiairetest.png); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td><td><div style="background-image: url(http://placehold.it/250x330/121212/f31352); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td></table>
<table><td><div style="background-image: url(https://img4.hostingpics.net/pics/271403bestiairetest.png); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td><td><div style="background-image: url(http://placehold.it/250x330/121212/f31352); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td></table>
<table><td><div style="background-image: url(https://img4.hostingpics.net/pics/271403bestiairetest.png); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td><td><div style="background-image: url(http://placehold.it/250x330/121212/f31352); height:330;"><div class="kisseuu"><div class="kisseu"><div style="height: 20px;"></div><center><div class="kisseua"><a href="link to app">name here</a></div><div style="height: 10px;"></div><div class="kisseub">set up what you want here i guess it will scroll should there be not enough space. </div></center></div><div></div></td></table></div></center>

Merci à vous ! Smile


Dernière édition par Melodiam le Sam 1 Juil 2017 - 14:19, édité 1 fois
avatar

Melodiam
****

Messages : 232
Inscrit(e) le : 16/04/2012

Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hover qui ne marche pas

Message par MlleAlys le Sam 1 Juil 2017 - 1:11

Bonjour,
Il y a certains endroits dans votre code css où il y a deux espaces, faussant les propriétés.
remarques bonus ^^ :
- la propriété font n'existe pas, il s'agit de font-size
- inutile de repréciser dans :hover la durée de la transition si elle n'a pas changé
Essayez le style suivant :
Code:
.kisseu { opacity:0; width:250px; height:330px; -moz-transition-duration:0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration:0.5s; transition-duration:0.5s; } .kisseuu { width:250px; height:330px; } .kisseu:hover { opacity:1; } .kisseua { width:200px; padding:5px; background-color:#fff; font-size:9px; font-weight:100; letter-spacing:1px; color:#000; text-align:center; text-transform:lowercase; } .kisseub { width:200px; height:250px; padding:5px; background-color:#fff; font-size:9px; font-weight:100; letter-spacing:0px; color:#000; text-align:justify; text-transform:lowercase; overflow:auto; }
avatar

MlleAlys
Membre actif

Messages : 4587
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hover qui ne marche pas

Message par Melodiam le Sam 1 Juil 2017 - 14:19

Bonjour ! Smile

Merci pour tes conseils, je les appliquerai à l'avenir ahah
En attendant le style corrigé marche très bien, merci beaucouuuup ! cheers
avatar

Melodiam
****

Messages : 232
Inscrit(e) le : 16/04/2012

Melodiam a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum