Div che appare al passaggio del mouse

**macio-97** · 27-11-2011, 16:59

Salve a tutti

sto cercando di far apparire un div al mouseover di un testo per esempio

codice:

<a>test</a><div>Appare l passaggio del mouse di test</div>

Ho provato con jquery ma niente si incasina tutto poi ovviamente come levi il mouse dovrebbe andarsene.. Qualcuno mi potrebbe aiutare?

**andbaz** · 27-11-2011, 17:28

Cosa dici?

codice:

<a onmouseover="document.getElementById('IDDELDIV').style.display='block'">
testo
</a>

<div id='IDDELDIV' style='display: none'>
div
</div>

**carlomarx** · 27-11-2011, 17:49

https://developer.mozilla.org/en/DOM...emove#Examples

**macio-97** · 27-11-2011, 18:10

Scusate mi sono dimenticato che cercavo di ottenere un'effetto ho provato con jquery (fadein) ma non è quello che cerco è qualcosa di simile a questo: http://xenforo.com/community/

**carlomarx** · 27-11-2011, 18:14

Originariamente inviato da macio-97
Scusate mi sono dimenticato che cercavo di ottenere un'effetto ho provato con jquery (fadein) ma non è quello che cerco è qualcosa di simile a questo: http://xenforo.com/community/

Prova il codice contenuto nel link che ti ho mandato…

**macio-97** · 27-11-2011, 18:51

Non proprio è un pò fastidioso il fatto che segue il mouse il codice di andbaz và benissimo solo che non è l'effetto che cerco è simile come ho detto a questo http://xenforo.com/community/
Come passi su un titolo del forum compare la descrizione)

**carlomarx** · 27-11-2011, 18:59

Originariamente inviato da macio-97
Non proprio è un pò fastidioso il fatto che segue il mouse il codice di andbaz và benissimo solo che non è l'effetto che cerco è simile come ho detto a questo http://xenforo.com/community/
Come passi su un titolo del forum compare la descrizione)

Se il problema è tutto lì basta che rimuovi la funzione follow() e vedrai che starà fermo immobile

Poi per la grafica basta che modifichi il CSS…

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tooltip Example</title>
<script type="text/javascript">
var oTooltip = new (function() {
  var nOverX, nOverY, nLeftPos, nTopPos, oNode, bOff = true;
  this.remove = function () {
    if (bOff) { return; }
    bOff = true; document.body.removeChild(oNode);
  };
  this.append = function (oMsEvnt2, sTxtContent) {
    if (!oMsEvnt2) { oMsEvnt2 = window.event; } // IE
    oNode.innerHTML = sTxtContent;
    if (bOff) { document.body.appendChild(oNode); bOff = false; }
    var nScrollX = document.documentElement.scrollLeft || document.body.scrollLeft, nScrollY = document.documentElement.scrollTop || document.body.scrollTop, nWidth = oNode.offsetWidth, nHeight = oNode.offsetHeight;
    nOverX = oMsEvnt2.clientX; nOverY = oMsEvnt2.clientY;
    nLeftPos = document.body.offsetWidth - nOverX - nScrollX > nWidth ? nOverX + nScrollX + 10 : document.body.offsetWidth - nWidth + 16;
    nTopPos = nOverY - nHeight > 6 ? nOverY + nScrollY - nHeight - 7 : nOverY + nScrollY + 20;
    oNode.style.left = nLeftPos + "px";
    oNode.style.top = nTopPos + "px";
  };
  this.init = function() {
    oNode = document.createElement("div");
    oNode.className = "tooltip";
    oNode.style.position = "absolute";
  };
})();
</script>
<style type="text/css">
div.tooltip {
  padding: 6px;
  background: #ffffff;
  border: 1px #76808C solid;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  z-index: 9999;
}
</style>
</head>

<body onload="oTooltip.init();">


Move your mouse here&hellip;</p>


&hellip;or here!!</p>
</body>
</html>

**macio-97** · 27-11-2011, 19:06

xD Questo si, riuscivo ad ottenerlo è l' effetto in entrata (e in uscita) che cerco mi sembra sia effetto a cascata ma non vorrei sbagliare ne cerco uno simile a quello del link. Ho provato anche ad "estrapolare" il codice guardante la sorgente ma non è per niente facile o.o

**cavicchiandrea** · 27-11-2011, 19:30

Usa un plug-in su base jquery http://flowplayer.org/tools/demos/tooltip/dynamic.html

**macio-97** · 27-11-2011, 19:36

Wow grazie è bellissimo vi farò sapere se avessi problemi

Discussione: Div che appare al passaggio del mouse

Strumenti discussione

Ricerca discussione

Visualizza

Div che appare al passaggio del mouse

Permessi di invio