hiding a div onfocusout

i have a div and an icon, i connected the 2 with toggle()
<img .... onclick=" jQuery('#my_div').toggle();" >

it works great, but how do i hide the div (once it's visible) when other area on the screen is clicked (besides the icon)? basicly what i need is <div id= 'my_div' ... onfocusout=jQuery('#my_div').hide();" >
but looks like focus events don't work on divs? i can't figure it out, please help

[gon1387]

This one's tricky, having an image, that would notify an onfocus event; I remember IE's the only one who does that. LOL

The first element with the onclick event that would fire up is the descendants, so meaning, if you're gonna reference body on the the onclick event, the function on the body -onclick event will be the last to run.

For blur and focus events, those can only be used by form elements. And the closest you can ever come with, having the image as your icon, is by using the BUTTON tag.

<button id="myButtonID">
    <img src="http://static.daniweb.com/images/attachments/0/logo.gif" />
</button>

and in your javascript you do it like this using jQuery:

$("#myButtonID").on({
    click:function(){
        $(this).focus()
    },
    focus:function(){
        console.log("focus")
    },
    blur:function(){
        console.log("blur")
    }
});

[gon1387]

just in case you don't want the button style, you can totally remove it like this:

<button style="background-color: transparent; border: 0px;">
    <img src="http://static.daniweb.com/images/attachments/0/logo.gif" />
</button>

[radhakrishna.p]

use onmouseout instead of onfocusout

it may works for you

the onmouseout worked on the div BUT not the way i wanted..

inside the div there's a table
<div onmouseout='$(this).hide();'><table>..</table></div>

so the funny thing is, the moment the mouse hovers over the table (which is pretty much 95% of the div (and the user needs to click on the rows in the table)) the div disappears

[jstfsklh211]

try adding an onmouseover='$(this).show()

worked!!! thanks!!