Sur mouseover cette div peut-elle être attachée au pointeur de la souris pour que son contenu s'affiche au passage de la souris?Afficher DIV sur MouseOver
<div id='show' style='display:none;'></div>
Si oui, comment cela est-il fait?
<div onmousemove="position();" onmouseout="hide();">abc</div>
<div id="tip" style="position: fixed; visibility: hidden;">that's abc!</div>
<script type="text/javascript">
function position() {
var d = document.getElementById('tip');
d.style.visibility = 'visible';
d.style.left = event.screenX + 'px';
d.style.top = event.screenY + 'px';
}
function hide() {
document.getElementById('tip').style.visibility = 'hidden';
}
</script>
Lorsque les utilisateurs sur mouses la div "abc", le "c'est abc!" div est affiché à côté du curseur de la souris (et le suit).
Essayez ceci:
<div id='show' onmouseover="this.style.display = 'block';"></div>
Mais pour cela de travailler, la div doit être visible en premier. Cependant, si la div est hiddne (display: none), l'événement onmoueever ne pourra pas trouver la div et aucun événement ne sera déclenché. Cela dit, essayez ceci qui utilise la propriété visibilité.
<div id='show' onmouseover="this.style.visibility = 'visible';" onmouseout="this.style.visibility = 'hidden';"></div>
k. Peux-tu me dire quel est le problème avec ce code? var ele = document.getElementById ('show'); document.getElementById ('show'). InnerHTML = el.innerHTML; ele.width = '200px'; ele.height = '30px'; ele.bgcolor = '# a9a9a9'; ele.color = '# fff'; ele.position = 'absolu'; ele.display = 'bloquer'; $ (fenêtre) .mouseover (fonction (événement) { $ ("# show"). Css ({'top': événement.pageY, 'left': événement.pageX}); $ ('# show') .height(); }); – Hulk
event.screenX + 'py' devrait être event.screenY + 'px' – Mic
@Hulk: Le problème avec ce code est qu'il est non formaté et impossible à lire. Plus sérieusement, cependant, 'el' n'est pas défini et vous mélangez jQuery et le code javascript pur - avez-vous jQuery chargé? De même, l'appel 'height()' ne fait rien. @Mic: Merci; fixé. –