I am trying to learn jQuery, so please understand I'm a beginner.
I want to do a simple fadeIn/fadeOut effect to my navigation buttons. I'm not sure if conceptually I am doing this 100% correct, and then I am also having some difficulties with programming.
My idea was to have buttons displayed in an element which is positioned absolutely, z-index:1. Then have the mouseover buttons positioned in the same way, z-index:2 and with visibility:hidden. Then when there is a mouseover event, fadeIn the hidden button, and on mouseout fadeOut the button.
My first difficulty is that the hidden buttons seem to be interfering with the buttons that are linked underneath. So you can see the buttons underneath but the links don't work completely. You can see that here:
I say "don't work completely" because the odd thing is that if you run the cursor over the buttons in some spots they actually DO link, but in most spots not. Common sense tells me they should either work or not work, so I'm confused by that.
My jQuery code is attached, very simple but not sure it is right. The mouseover buttons simply have a class of navbutton, so I'm trying to select anything with that class, and then apply the hover function to it.
Again, I understand that the solution to this may not be fixing what I've already done, but perhaps there is a better way of doing these types of mouseovers?
Would really appreciate any help. Thank you!