how to break out of hover function
First post ... yayyyy!
Ok, here's the problem. I have a hover function that also has the "rollout" function attached to it. However, I also call a different function when the user clicks. This function when clicked, changes the class name, however, the hover function, is waiting for my "rollout" and does stuff that I don't want after the click has happened. Ok, that was confusing. Let me show you with code:
Hover Function: (basically turns on/off an image)
-
$(document).ready(function() {
$('.hotelCat').hover(function(){
$("img", this).css("display","none");
}, function(){
$("img", this).css("display","block");
});
});
Click Function: (turns on/off an image as well as changes class)
-
var selectedLink = "1";
function changeSection(linkID){
$('#link_'+selectedLink).addClass('hotelCat');
$('#link_'+selectedLink).removeClass('hotelCatSelected');
$('#link_'+selectedLink+' img').css("display","block");
$('#link_'+linkID).addClass('hotelCatSelected');
$('#link_'+linkID).removeClass('hotelCat');
$('#link_'+linkID+' img').css("display","none");
selectedLink = linkID;
}
So this actually works when I click, but the second that I rollout, the second portion of my hover kicks back in, and then shows the images that are supposed to hidden. How do I "break" the hover function?