Faire CSS info-bulle suivre curseur
Je suis de la création d'un CSS info-bulle qui va avoir beaucoup de contenu dans l'info-bulle et au lieu d'être dans une statique de la place, je me demandais est-il un moyen facile de faire suivre le curseur lorsque vous passez la souris sur le lien.
Ici est un exemple de la CSS info-bulle
<div class="couponcode">First Link
<span class="coupontooltip">Content 1</span>
</div>
.couponcode:hover .coupontooltip {
display: block;
}
.coupontooltip {
display: none;
background: #C8C8C8;
margin-left: 28px;
padding: 10px;
position: absolute;
z-index: 1000;
width:200px;
height:100px;
}
Connexes: stackoverflow.com/questions/15702867/...
OriginalL'auteur Greenhoe | 2014-03-21
Vous devez vous connecter pour publier un commentaire.
Quelque chose comme cela
VIOLON
Juste d'ajouter ou de soustraire un peu, comme ça -> jsfiddle.net/q46Xz/188
Merci à vous, bien que pouvez-vous expliquer pourquoi l'original de violon et de mon site utilisent le même code, mais l'affichage de différentes longueur à partir du curseur? Je vais avoir à définir pageX - 275 et pageY environ - 100. Pourquoi mon site déjà ces valeurs, donc comme ça que j'ai besoin de réajuster?
pageX/Y est la position de la souris dans la fenêtre, de sorte que, si les éléments sont positionnés avec une relative/absolue/static etc. en haut et à gauche, les positions peuvent être assez différents de ceux de la position de la souris etc.
Un bon plugin compte pour la fenêtre de redimensionnement, navigateur incohérence etc. mais vous ne pouvez pas vous attendre à obtenir qu'ici, la réponse vous montre comment déplacer quelque chose le long avec le curseur de la souris, si vous voulez quelque chose qui fonctionne avec tous les scénarios d'utilisation d'un plugin. Voici le source pour qTip, et il n'y a aucun moyen que je peux écrire tout ce code comme une réponse rapide, une bonne info-bulles sont compliquées, et c'est pourquoi la plupart des gens utilisent un plugin.
OriginalL'auteur adeneo