I am working on a navigation for a client’s site. The idea is simple really. there is a menu item icon with the menu item name.
On hover and current states the background, text, and icon change color. (in my case the background changes to orange and the text and icon change to white)
I set up the navigation items to be Nested as follows.
Container
- Image Link (Brand)
- NavMenu
–LinkBlock (NavButton)
—DivBlock (where the PNG image is set as Background)*
—TextBlock (Where the name of the Menu Item is)
The “NavButton” structure repeats 4 more times for other.
- the PNG image is 32x64 and contains two variations of the same image… One in purple and the other in white. The idea is that the DivBlock is constrained to 32x32 and in normal state it is fixed to the top of the image (showing the purple icon), when moused over the image is fixed to the bottom of the image (showing the white icon)…
I currently have it so that when moused over the NavButton and the TextBlock change colors properly…
HOWEVER, the DivBlock with the image in it ONLY works if you happen to HOVER over the DivBlock.
MY QUESTION or REQUEST FOR ASSISTANCE
HOW do I get it so that the DivBlock performs like the TextBlock and change when anywhere in the NavButton is Hovered over?
Your help, links to tutorials or other post related to this that I could not find is appreciated.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)