Here is the current code snippet for showing and hiding a footer banner. Everything seems to be working fine except for an issue with MouseOver functionality.
The MouseOver feature works as expected, but when a user clicks within the area, the highlight disappears momentarily. However, upon exiting the area, the highlight flashes again, indicating that the mouseenter/mouseleave event may be getting reset after a click in the same area.
Is there a way to prevent the event from triggering again after a click? Any suggestions would be appreciated. Thank you.
// Hide the Footer
$(document).on('click','div#fixedPageFooterShown', function() {hideFooterBanner();});
// Highlight Footer MouseOver
$(document).on('mouseenter','div.fixedPageFooterDisplay', function() {
$('img.bannerBottomMouseOver').show();
}).on('mouseleave','div.fixedPageFooterDisplay', function () {
$('img.bannerBottomMouseOver').hide();
});
// Hide Footer Banner Function
function hideFooterBanner() {
$('div#fixedPageFooter').fadeOut('fast', function () {
$('div#fixedPageFooterClosed').fadeIn('fast');
$('img.bannerBottomMouseOver').fadeOut('fast');
$('img#footerArrowMin').hide();
$('img#footerArrowMax').show();
});
}
// Show Footer Banner Function
$(document).on('click','div#fixedPageFooterClosed', function() {
$(this).fadeOut('fast', function () {
$('div#fixedPageFooter').fadeIn('fast');
$('img.bannerBottomMouseOver').fadeOut('fast');
$('img#footerArrowMax').hide();
$('img#footerArrowMin').show();
});
});