hover du texte qui bug
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
hover du texte qui bug
Détails techniques
Version du forum : phpBB2Poste 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 !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 !!
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
Re: hover du texte qui bug
Bonjour Melodiam, en remplaçant :
Par :
Bien à vous.
- 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.
Re: hover du texte qui bug
Coucou !
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 !
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 !
Sujets similaires
» Hover qui ne marche pas
» Image et texte en hover Comment faire ?
» Le hover ne fonctionne pas
» Texté coupé dans la feuille de personnage avec effet hover
» bouton Hover
» Image et texte en hover Comment faire ?
» Le hover ne fonctionne pas
» Texté coupé dans la feuille de personnage avec effet hover
» bouton Hover
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum