hover du texte qui bug

2 participants

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

Résolu hover du texte qui bug

Message par Melodiam Lun 23 Avr 2018 - 16:26

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 :  

Description du problème

BONJOUUUR ! Smile

Je suis en train de coder une fiche et je n'arrive pas à régler mon problème de hover sur le texte dans la colonne gauche... j'aimerais qu'au passage de la souris, le texte dans le bloc et la couleur du bloc changent. Ce qui marche ! Mais il y a un décalage et je ne comprends pas pourquoi... Sauriez-vous où est le pblm ?

merci !!
Like a Star @ heaven

Voici mon code :

Code:
<link href="https://fonts.googleapis.com/css?family=Yeseva+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet">
<style>.fondprincip {width:500px; height: 700px; padding: 10px; position: relative; background: #fff; border: 1px solid #ededed;}.fondprincip2 {width: 480px; padding: 10px;  height: 700px; position: relative; overflow: hidden; background: #e3476b;}.colonn1 {width: 160px; padding: 10px; height: 660px; position: relative; float: left; overflow: hidden; background: white; opacity: 0.9;}.colonn2 {margin-left: 10px; width: 270px; padding: 10px; height: 660px; position: relative; float: left; overflow: hidden; background: white; }.pseudo {color: white; font-size: 40px; font-family: Cedarville Cursive; text-align: right; }.sspseudo {color: black; font-size: 20px; letter-spacing: -1px; margin-top: -10px; font-family: yeseva one; text-transform: uppercase; text-align: right; }.bloctxt {overflow: auto; background: black; line-height: 10px; width: 210px; height: 340px; padding: 30px; font-size: 10px; color: white; text-align: justify; }.bloctxt b {font-size: 15px; font-family: yeseva one; letter-spacing: 1px; color: #f7c6d7; }.tooltip1 { width: 120px; color: #fff; text-align: center; padding: 10px; margin-top: 10px; font-size: 9px; text-transform: uppercase; background: red;}.tooltip1 .tooltip1text {visibility: hidden;width: 120px; background-color: green; color: red; text-align: center; padding: 10px; margin-top: -10px; position: absolute; margin-left: -105px;}.tooltip1:hover .tooltip1text { visibility: visible; }</style>

<center><div class="fondprincip"><div class="fondprincip2"><div class="colonn1"><br><br><br><br><br><br><br><br><br><div class="tooltip1">age ou truc ?<span class="tooltip1text">autre truc</span></div><div class="tooltip1">petite info<span class="tooltip1text">autre chose ?</span></div><div class="tooltip1">2e info<span class="tooltip1text">& chose ?</span></div></div><div class="colonn2"><div style="background: #e3476b; height: auto; overflow: hidden; padding: 30px;"><div class="pseudo">maybelline</div><br><div class="sspseudo">s. tudor</div></div><div class="bloctxt">
<b>info</b> Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.<br>
<b>autre info</b> Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.<br>
<b>info</b> Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.<br>
<b>autre info</b> Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.<br></div></div></div></div><div style="margin-left: 50px; width: 200px; float: left; height: auto; position: relative; margin-top: -740px;"><img src="http://i66.tinypic.com/15cdpno.png" height="auto" width="200" ></div><div style="position: relative; width: 120px; height: 120px; float: left; margin-left: 198px; margin-top: -680px; background: white; padding: 10px;"><img src="http://i67.tinypic.com/715wg0.gif" height="120" width="120" ></div><div style="margin-left: 160px; width: 100px; float: left; height: auto; position: relative; margin-top: -740px;"><img src="http://i66.tinypic.com/15cdpno.png" height="auto" width="100" ></div></center>


Dernière édition par Melodiam le Lun 23 Avr 2018 - 17:49, édité 1 fois
Melodiam

Melodiam
****

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

http://funkytown-bakemono.forumactif.com
Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: hover du texte qui bug

Message par ◦Jay◦ Lun 23 Avr 2018 - 17:11

Bonjour Melodiam, en remplaçant :

Code:
.tooltip1 .tooltip1text {visibility: hidden;width: 120px; background-color: green; color: red; text-align: center; padding: 10px; margin-top: -10px; position: absolute; margin-left: -105px;}

Par :

Code:
.tooltip1:hover { color: #c00000;background: green;}

Bien à vous.
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: hover du texte qui bug

Message par Melodiam Lun 23 Avr 2018 - 17:44

Coucou ! Very Happy

Alors cela s'aligne oui mais cela ne fait que changer les couleurs.
En fait à la base mon problème fait ceci : clique
Quand je surpasse la souris, pour dévoiler l'autre texte sur fond vert, le fond vert est décalé et plus je met de cases plus à chaque fois cela se décale.

En remplaçant comme vous me l'avez conseillé mon code par ce bout de code que vous m'avez fourni, il n'y a plus de décalage mais on voit le texte sur le même bloc -> clique

Je ne sais pas si je suis assez claire ^^'

Merci en tous cas !

<b>EDIT :</b> En fait on m'a apporté la solution par mp (merci à 1019) -> avec des div à la place des span et un jeu de % sur la hauteur etc. ça fonctionne
MERCI ! Very Happy Like a Star @ heaven Like a Star @ heaven Like a Star @ heaven Like a Star @ heaven
Melodiam

Melodiam
****

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

http://funkytown-bakemono.forumactif.com
Melodiam a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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