Combine Click with hover

Question

I need to get this code to work so when the item is clicked the mouseout doesn't fade out the element.

$('.link1').hover(function(){
    $('#image1').fadeIn();
},function(){
    $('#image1').fadeOut();
}).click(function(){
    $('#image1').css('display','block');
});

Thanks in advance.

Answer 1

Add some attribute so you can check on it.

$('.link1').hover(function(){
  if(!$('#image1').is(':visible')) $('#image1').fadeIn();
}, function(){
  if(!$(this).attr("clicked")) $('#image1').fadeOut();
}).click(function(){
  $(this).attr("clicked", true);
  $('#image1').css('display','block');
});

Answer 2

$('.link1').hover(function(){
    $('#image1').fadeIn();
},function(){
    var clicked = $(this).data('clicked');
    if(!clicked) $('#image1').fadeOut();
}).click(function(){
    $(this).data('clicked', true);
    $('#image1').css('display','block');
});