Changing the css of a div with Jquery mouseover

Question

I need that if the mouse is not on top of a div, after 4 seconds it disappears, changing the css. How to do this with Javascript/Jquery?

Answer 1

CSS:

.hide{
    display: none;
);

HTML:

<div id="my-div" style="background-color:#ff0000" >Minha Div</button>

Javascript:

function hideDiv(){
    $("#my-div").addClass('hide');
}

t = setTimeout(hideDiv,4000);

$("#my-div").mouseout(function(event){
    t = setTimeout(hideDiv,4000);
});

$("#my-div").mouseover(function(){

    if (t!=null) {
        clearTimeout(t);
    }
});