How to place some text over the DIV without breaking hover area of this DIV?

I'm total noob with CSS and it looks like hell =/

I have absolute positioned DIV and I handle mouse events over this DIV with JS like this:

    <div style='position: absolute; left: 0px; width:50px; height: 50px;'
      onmouseover='this.style.border="2px solid red"' 
      onmouseout='this.style.border="1px solid black"'>
    </div>
    <div style='position: absolute;'>SOME TEXT</div>

I need to place some text over this DIV and over the few same DIVs, but if I place any element over this DIV onMouseOut event is firing when mouse cursor switch to text. Tag with text can't be inside the DIV. Pl开发者_Go百科aying with z-index didn`t help. My browser is IE8.

UPDATE: I can't place text into the div because text must go beyond bounds of DIV. In other words I want handle mouse events over arbitrary area in any text. I can do this if I set backgroundColor of DIV, but I need handle events of transparent area.

---

tried {cursor: pointer} on the text div?

---

If you're trying to do this purely with mouseover events, then the only way to achieve what you're after is to place the second div inside of the first.

On the other hand, if you want to dive into some scripting, here's a basic algorithm for how you can handle this:

1. Set up a function to fire when you mouseover the trigger divs. This function will show the "SOME TEXT" div, if its display is set to "none".
2. Set up a function to fire when you mouseout of the trigger divs. This function will be a little more complex. First you have to check to see what the event.currentTarget is; if event.currentTarget is the "SOME TEXT" div, return false. If it's anything else, then you set the display of "SOME TEXT" to "none".

This might be a little beyond where you are with CSS and JS, but it's pretty much the only way to get it done, since CSS alone won't do what you need.