I'm having trouble wrapping my head around the logic here. I've got two jQuery functions -- one that handles the hover state and one that handles mouse click.

Code:
jQuery("#portfolio .featured li .link").hover(function() {
	jQuery(this).parent().parent().find(".overlay").fadeIn();
	jQuery(this).parent().parent().find("h4 a").addClass("active");
}, function() {
	jQuery(this).parent().parent().find(".overlay").fadeOut();
	jQuery(this).parent().parent().find("h4 a").removeClass("active");
});
jQuery("#portfolio .featured li .link, #portfolio .featured li h4 a").click(function(e) {
	jQuery("#portfolio .featured .overlay").fadeOut();
	jQuery(this).parent().parent().find(".overlay").fadeIn();
	jQuery("#portfolio .featured .left").animate({
		left: 0
	}, 1500, "easeInOutExpo", function() {
		jQuery("#portfolio .featured .middle .content").fadeIn();
	});
	jQuery("#portfolio .featured .right").animate({
		right: 0
	}, 1500, "easeInOutExpo");
	jQuery("#portfolio .featured .article").hide();
	var id = jQuery(this).attr('href');
	jQuery(id).fadeIn();
	jQuery("#portfolio .featured .nav li a").removeClass();
	jQuery(id + 'Title a').addClass("active");
	e.preventDefault();
});
The issue is that I need to get the two to cooperate. How can I rework this so that when a .link is clicked that the .overlay stays visible?

Thank you for your help.