Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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 : 271
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 : 4685
Inscrit(e) le : 12/09/2012

http://mllealys2.forumactif.org/
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 : 271
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