Accueil
Créer un forumLa date/heure actuelle est Ven 26 Avr 2024, 17:20
1 résultat trouvé pour C6CFD9
Problème à la fermeture de mon Infobulle
Bonjour à vous,Je travaille actuellement sur le design de mon forum et plus précisément sur la PA.
J'ai en effet installé un effet d'infobulle uniquement en CSS ( tuto trouvé sur NU) sur mes prédéfinis.
Celui-ci fonctionne très bien MAIS à la fermeture le contenu de l'infobulle est... disons hideux ?
Petite précision : cela le fait sous Chrome, IE, portable etc...
Voici des captures d'écran pour mieux vous montrer.
- A l'ouverture:
- A la fermeture:
Et pour que ceux qui auront la gentillesse de bien vouloir se pencher sur mon problème aient toutes les données en main voici mes codes
- css:
/* BLOC CONTENANT L'INFOBULLE - L’ICÔNE */
.transition-NU{
position: relative;
width: 50px;
float: left;
margin: 10px;
padding: 0;
}
/* INFOBULLE */
.NU_transition{
background: #C6CFD9;
border: 0px solid #fffae7;
width: 0;
height: 0;
overflow: hidden;
position: absolute;
bottom:100px;
top: 0;
z-index: 999;
padding: 0;
text-align: justify;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur webkit */
-moz-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur mozilla */
-o-transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour navigateur opera */
transition: width 0.8s ease-in 0.2s, height 0.8s ease-in 0.2s, padding 0.8s ease-in 0.2s; /* pour les navigateurs récents */
}
/* INFOBULLE AU SURVOL */
.transition-NU:hover .NU_transition{
height: 100px;
width: 150px;
padding: 5px;
text-align:justify;
overflow: auto;
font-size:12px;
color: #216882;
padding:3px;
border-width: 3px;
}
/* IMAGE (icône) */
.transition-NU img {
position: relative;
z-index: 990;
left: 0;
bottom: 0;
-webkit-transition: all 1s linear 0s;/* pour navigateur webkit */
-moz-transition: all 1s linear 0s; /* pour navigateur mozilla */
-o-transition: all 1s linear 0s;/* pour navigateur opera */
transition: all 1s linear 0s; /* pour les navigateurs récents */
}
/* IMAGE (icône) AU SURVOL */
.transition-NU:hover img {
-webkit-transition: rotate(-360deg);/* pour navigateur webkit */
-moz-transform: rotate(-360deg); /* pour navigateur mozilla */
-o-transform: rotate(-360deg);/* pour navigateur opera */
transform: rotate(-360deg); /* pour les navigateurs récents */
}
- Partie HTML:
<div class="transition-NU">
<img style="width: 50px; height: 50px;" alt="" src="https://www.pixenli.com/images/1491/1491343963066097200.png" />
<div class="NU_transition">
<h3>
Mon joli titre
</h3>
<span> Ici les infos qui s'afficheront au survol de l’icône <br /> <a href="#profil">Profil</a> <a href="#mp">MP</a> </span>
</div>
Et pour voir l'effet en live c'est par ICI
Merci à vous de m'avoir lue && à ceux qui voudront bien m'éclairer !
Et bonne journée à tous !
- le Mer 05 Avr 2017, 11:54
- Rechercher dans: Archives des problèmes avec un code
- Sujet: Problème à la fermeture de mon Infobulle
- Réponses: 2
- Vues: 737
