Jquery code:

$(".menu_clickable").mouseover(function() {
$(this).css({'background-color' : '#F00'}).mouseout(function(){
$(this).css({'background-color' : '#FFF'});
}); 
});


$(".menu_clickable").live('click', function() { 
$(this).css({'background-color' : '#FCC'});
});

HTML source:

<div class="menu_clickable prof_info2" id="prof_info" >first</div>
<div class="menu_clickable prof_info3" id="prof_info" >second</div>
<div class="menu_clickable prof_info3" id="prof_info" >third</div>

I'm trying to make the hover efect using Jquery and it is working fine but if I want to change the DIV background color when it's clicked it's not working, actually the clicked DIV change background color but it is stay like that while the cursor is on it. If I move it out it will restore the original background color. Why?