jQuery behaves differently on hover outs for the same element
Hello,
here is my live example: http://eshop.equit.cz/
Try hovering over the menu - it should change the button color to black and changw the font to white. Vice versa when hovering out. However when I hover over the button then move my mouse down to the submenu and then hover somewhere out, button is white but the text is not black although Firebug show it should be. If I move my mouse immediately to next button or out of the button, it works as expected.
Here's my JS code:
- $("ul#topnav li.sub").hover(function() { //Hover over event on list item
- $(this).css({ 'background' : '#000', 'box-shadow' : '0 0px 20px rgba(0, 0, 0, 0.3)' }); //Add background color + image on hovered list item
- $(this).find("span").show(); //Show the subnav
- $(this).children("a").css({'color' : '#fff'}); // HERE I PAINT THE FONT TO WHITE
- $("ul#topnav").css({ 'border-bottom' : 'none', 'padding-bottom' : '0px'});
- } , function() { //on hover out...
- $(this).children("a").css({'color' : '#000'}); // HERE I PAINT THE FONT BACK TO BLACK
- $(this).css({ 'background' : 'none', 'border-left' : 'none', 'border-right' : 'none', 'border-top' : 'none', 'box-shadow' : 'none'}); //Ditch the background
- $(this).find("span").hide(); //Hide the subnav
- $("ul#topnav").css({ 'border-bottom' : 'none', 'padding-bottom' : '1px'});
- });
Could this be a bug or I just do some stupid mistake?