ondragenter - ondragleave events in javascript

[tjb...@gmail.com]

This was posted before, but I've run into the same problem. Has anyone
been able to find a workaround for this:

I want to hi-light a div that may (or may not) contain other elements
when
the user drags over it.
The problem is the simple solution as below doesn't work properly when
the
div contains other elements, as the ondragleave event fires when you
move
the mouse into the inside of the div. and this removes the hi-light.
(The onmouseleave event works fine in this respect; it only fires when
you
move the mouse outside of the div.)
Any clues to a simple cure for this?

Platform is ie6 on win2k

an example of the problem..
<script>
function hilite(el){el.style.border='solid 1px black';}
function restore(el){el.style.border='solid 1px lightgrey';}
</script>
<div
ondragenter="event.returnValue=false;hilite(this);"
ondragover="event.returnValue=false;"
ondragleave="restore(this);"
style="border:solid 1px lightgrey">
Text here - drop target works as intended
</div>
<br/>
<div
ondragenter="event.returnValue=false;hilite(this);"
ondragover="event.returnValue=false;"
ondragleave="restore(this);"
style="border:solid 1px lightgrey">
With other elements here inside the drop target - does not work as
intended
<table>
<tr><td>row1</td></tr>
<tr><td>row2</td></tr>
<tr><td>row3</td></tr>
<tr><td>row4</td></tr>
</table>
</div>
<br/>
<br/>
<br/>
<div>some text to drag here</div>