Configuration de la scène:
J'ai 2 couches une sur l'autre. La couche inférieure contient des liens (images simples), la couche supérieure contient une info-bulle avancée ressemblant à des oscillations pour la couche inférieure. Ces info-bulles peuvent être importantes (elles peuvent se chevaucher facilement sur d'autres liens et se chevauchent presque toujours le lien qu'ils sont à l'essence). P>
Ma question: p>
J'aimerais que mes événements de la souris d'introduction se produisent sur la couche inférieure, puis sur Mouseover Afficher l'info-bulle dans la couche supérieure. De cette façon, lorsque vous vous déplacez de la liaison inférieure, l'info-bulle dans la couche supérieure disparaît et que l'info-bulle du nouveau lien peut apparaître. P>
Comment puis-je prendre les événements de la couche supérieure et les transmettre au calque ci-dessous à la place? De sorte que la couche supérieure est transparente transparente. P>
Exemple HTML: P>
P>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <div id="sandwich"> <div class="stack" id="bottom"> <div class="tile" id="tile1">1</div> <div class="tile" id="tile2">2</div> <div class="tile" id="tile3">3</div> <div class="tile" id="tile4">4</div> <div class="tile" id="tile5">5</div> </div> <div class="stack" id="top"> <div class="over" id="over1">Tooltip for 1</div> <div class="over" id="over2">Tooltip for 2</div> <div class="over" id="over3">Tooltip for 3</div> <div class="over" id="over4">Tooltip for 4</div> <div class="over" id="over5">Tooltip for 5</div> </div> </div> <div id="log"></div>
4 Réponses :
Je ne suis pas tout à fait sûr que je comprenne ce que vous demandez. Cela me semble un peu comme une pointe d'outil. Voici un exemple de comment faire une info-bulle ceci à l'aide de jQuery, CSS et HTML.
http://jsbin.com/ilali3/13/edit
espoir que vous avez commencé. Si vous ajoutez de plus de détails ou modifiez que JSBIN avec plus de détails, nous pouvons itérus un peu.
J'ai mis à jour l'exemple un peu pour inclure le stockage des informations sur l'outil d'outil dans l'élément HTML lui-même en utilisant JQuery. Ceci est un peu plus propre.
Bob
La principale différence entre le mien et une info-bulle normale est que la mine peut également chevaucher le lien d'origine (désolé j'ai oublié de mentionner cette partie). - Question originale mise à jour
J'espère que je comprends l'OP, mais vous pouvez reproduire l'événement sur n'importe quel sélecteur après que l'événement d'origine a eu lieu: http://jsfiddle.net/cr9kt/1/
Dans l'échantillon lié, je prends l'événement sur la couche supérieure et créerai un événement similaire tiré sur la couche inférieure. Vous pouvez en faire plus loin avec n'importe quel individu en cliquant sur chaque élément (par opposition au haut et en bas dans son ensemble).
Ceci est une idée empruntée d'une autre question: déclencher un clic JavaScript () événement à des coordonnées spécifiques
Je pense que c'est la meilleure solution. Maintenant, j'ai juste besoin de l'obtenir sur la souris et la souris. Merci
Je serais gentil de votre part si vous déplacez le code de Jsfiddle vers un SO Snippet afin qu'il soit disponible directement dans votre réponse. Meilleures salutations
Cela peut sembler trop complexe et inélégant ... il fausse votre fonctionnalité .. mais cela fonctionne;) essayez ici: http://jsfiddle.net/nepreneur/vzq4z/1/
Pour les personnes trébuchantes sur ces neuf ans plus tard (comme je l'ai fait) la meilleure façon de le faire est avec la propriété CSS Pointer-Events ... Il suffit de le définir sur 'Aucun' pour votre élément (s) et voici le la magie. Pas de JS requis.