The goal is the following:
1) On a mouseover, create & show a div;
2) If the user hovers over the div, keep it visible, otherwise remove
and destroy.
I haven't been able to find examples, so I came up with this idea:
1) On a mouseover, create & show the div inside a containing div. Set
this created div as "currently visible";
2) On mouseover of the containing div, hide the "currently visible"
div;
EXCEPT
3) Cancel the event bubble if the mouse happens to hover over the
"currently visible" div.
Of course, what I have so far isn't working, and I don't even know if
I'm solving the problem in any efficient manner. Any help would be much
appreciated!
--Brent
--------------------------------------------------
var cv = null; //curr visible
function ad(e,id) { //create and show div in 1.5 seconds
var l = e.clientX;
var t = e.clientY;
var i = document.getElementById('containerDiv');
var y = document.createElement('div');
y.id = 'a'+id;
y.onmouseover = 'javascript:kv(event)'; //<---this line doesn't seem
to work!
y.innerHTML = '<a href="javascript:delLink('+id+')">Delete</a>';
y.style.height = '100px';
y.style.width = '100px';
y.style.border='1px solid #c3c3c3';
y.style.position='absolute';
y.style.top = t +'px';
y.style.left = l +'px';
e.cancelBubble = true;
function func()
{
i.appendChild(y);
cv = y;
}
window.setTimeout(func, 1500);
}
function rd() {//remove div
var d = document.getElementById('linkdiv');
function func()
{
if(cv != null)
{
d.removeChild(cv);
cv=null;
}
//d.removeChild(document.getElementById('man'+id));
}
window.setTimeout(func, 1500);
}
function kv(e) //keep visible
{
e.cancelBubble = true;
}
