1

How can I make a div follow the mouse's pointer only when over a span?

following the link: jQuery - Follow the cursor with a DIV

The above link says how to make a div follow the pointer, but, how to make the div disappear?

How do I do to the div so it only shows up only when the pointer is over a span (or div, or any other possible element).

I mean: when the mouse is over a span, a div will shows up following the mouse's pointer. When the pointer leaves the span, the div must desappear ...

Thanks in advance

Community
  • 1
  • 1
Diego Favero
  • 1,969
  • 2
  • 22
  • 32

2 Answers2

3

Try this...

$("#spanID").hover(function() {
    $("#divID").show();
}, function() {
    $("#divID").hide();
});

Alternatively, if you like fading...

$("#spanID").hover(function() {
    $("#divID").stop().fadeIn();
}, function() {
    $("#divID").stop().fadeOut();
});

I was going to use toggle methods, but the above code doesn't assume an initial display state of the div

Reinstate Monica Cellio
  • 25,975
  • 6
  • 51
  • 67
  • Well, I added to the above code: $(document).bind('mousemove', function(e){ $('#divID').css({left: e.pageX, top: e.pageY});}); and I got the result I wanted. But, when I move the pointer left to right, or up to down, I got a kind of blinking div ... It does not happens when I move in the oposites ways ( right to left or down to up ) ... any Idea the why ? and the same happened when I used pure JS ,like, document.getelementeById('divid').style.visibility = 'visible' (or hidden ...) – Diego Favero Jan 12 '12 at 23:46
  • It sounds like the cursor is going over the div and therefore no longer hovering over the span, so it disappears, but then when the cursor moves again it's over the span so the div reappears. Can you make an example page with what you have so far on jsfiddle or the like? – Reinstate Monica Cellio Jan 12 '12 at 23:52
0
<span onmouseover='$("#divFollower").show()' onmouseout='$("#divFollower").hide()'>Span Contents</span>
Travis J
  • 81,153
  • 41
  • 202
  • 273
  • Can't you just adapt the link you supplied to your div and make it follow the pointer? i.e. with css position absolute and left,top set to the mouse offsets – Travis J Jan 12 '12 at 23:49