Let me start off by explaining the issue I'm facing. Take a look at to get a better understanding of what I'm referring to. It needs to be a specific page, not the home page, so you can see the problem for yourself.
Now, when you hover over the menu, especially the one with a sub-menu, you'll notice that the child elements become "invisible" when the parent element is hovered over, as they are the same color as the background. The same happens when you hover over the child element.
What I'm trying to achieve is to have both elements change to white when the mouse is over either of them.
I have come up with this pseudo-code:
$('li.menu-parent-current > li.menu-child-current a').hover(
function() {
$(this).css('color', '#fdfdfd');
}, function() {
if (/* mouse leaves parent as well */) {
// change child color to blue
} else if (/* mouse did not leave parent */) {
// make child color white
$(this).css('color', '#fdfdfd');
}
});
I know there is definitely room for improvement in this code, so feel free to provide a better version if needed. :)
I've spent the past few hours trying to solve this issue, but I haven't been successful. I'm sure it's something simple, but I'm not very experienced with jQuery. Thank you in advance for any help you can offer. :)
EDIT:
Well... It turns out I was overcomplicating things. Sometimes being new to something doesn't allow for clear thinking. :P