Question

Here is my code: http://jsfiddle.net/XYbmE/75/

I want the div#first to stay blue if the black box is there. The black box only appear if i click on the div#first. If i click anywhere else the blackbox should be hidden and the div#first should be back red.

What should i do?

Answer 1

This looks like a job for classes!

When the click event is triggered, add a class to #first that has the same CSS as :hover.

div#first:hover,div#first.hover{
 width:200px;
 height:200px;
 background-color:blue;
}

And then, add the class on click:

$('#first').click(function() {
  $(this).addClass('hover');
  $('#second').show();
});

Remove the class and black box, when you click elsewhere:

$('body').click(function(e) {
    if(!$(e.target).is('#first')){
        $('#first').removeClass('hover');
        $('#second').hide();
    }
});

DEMO: http://jsfiddle.net/EjKKP/