I've written some javascript that allows me to display/hide divs whenever you click certain links. Now, to do this, I have the div say that the display="none". But, now I want to set it so that whenever you mouseout from it, it closes. It does that, except whenever the mouse hovers over any div that is inside of the div it closes too. I don't want this. Is there some CSS that can stop this? Here is the HTML:

(click this and it displays it)


(the code it displays)


So, anything inside of the "openb1" that is in a div or span causes it to close when it is mouse overed. Basically, whenever the mouse hovers over "boxrow" it thinks it is outside of "openb1" and shuts itself. Can someone tell me how to stop this?

Whoa.. I'm having the exact (or well, similar at least) problem. And I can't find a simple solution either. Somehow we need to have it ignore those child elements.

Have a look at an example I made. Is it that how you want it to work?

If so, just insert this code in the header of your website:

Thanks! I PM'ed you with a question.

I would suggest delaying the closing by about .5 seconds to allow for normal mouse movement.

How do you do that?

Also, just incase I want to do this, how do you do it? How can you get it so that when you click outside of the DIV, then it closes (as IPB does)

I think that would be a focus related event, I think onBlur is the one you want.
(don't take that as gospel though)

You would make use of the "setTimeout" function. I set up a New Demo, the only difference is the updated script.




That would be starting point, yes. You check if the opener-link is focused. If so, then show the div. As soon as you click somewhere, the focused opener link "blur"´s and the div gets closed.