Hi, anur.
To show hovered image on menu page just add to file style.css of your active theme this few strings:
.menu-item.current-menu-item a.menu-image-hovered .menu-image-hover-wrapper img.hovered-image {
opacity: 1;
}
Hi Alex,
I don’t think Anur is looking for a transparency affect.
I have same requirement. Let me give an example: the menu image is grey.jpg, but it changes to white.jpg when it’s the current menu item.
Neo
I know, just try to add this code and see what is happen.
For better transparent effect I place the second image over the first, and hid the second image with opacity:0, so for .menu-item.current-menu-item just add opacity:1 and this should solve the problem.
Or have I got it all wrong again?
Hi Alex,
You’re awesome! It works.
I didn’t see how it would work because your plugin doesn’t ask for the hover image until the menu is saved. After I saved the menu, added hover image and saved a again, the CSS just works!
The only change I made to the CSS is I used current-menu-ancestor instead of current-menu-item because there is no current-menu-item on top level in my case.
Here is my css:
.menu-item.current-menu-ancestor a.menu-image-hovered .menu-image-hover-wrapper img.hovered-image {
opacity: 1;
}
Thank you Alex!
Neo
