My Current Challenge
I've created a list (ul#portfoliolist) with each item serving as a unique navigation element.
Upon hovering over any item, the opacity shifts from 0.65 to 1, and the right padding changes from 0 to 10px. Upon moving the mouse away, these changes revert:
$('ul#portfoliolist>li:not(.active)').hover(function(){
$(this).stop().animate({paddingRight:'10px',opacity:1},100);
},function(){
$(this).stop().animate({paddingRight:0,opacity:0.65},300);
})
If a user clicks on an item, it removes the active class from other items and adds it to the clicked one:
$('ul#portfoliolist>li').click(function(){
$('ul#portfoliolist>li').removeClass('active');
$(this).addClass('active');
//var item = $(this).attr('data-portfolio');
//$('div.portfolio').css({backgroundImage:'url(img/portfolio_'+item+'.png)'})
})
The Dilemma I'm Facing
Although both functions work individually, they clash when combined – only the hover effect remains functional.
Upon hovering, the desired animation is executed, but upon cursor removal, the secondary hover function kicks in and overrides the .active css styling.
Is there a way to prioritize the click function over the mouseout aspect of the hover function?