I want to create an effect that when the user clicks on a menu item hover effect my stay.

This is my link:


This is the CSS code for the full menu.

   .menu-item a img {
        border: none;
        box-shadow: none;
        vertical-align: middle;
        width: auto;
#menu-meniu >li {padding-left:80px;}
.menu-item a.menu-image-hovered img.hovered-image,
.menu-item a.menu-image-hovered:hover img.menu-image {
        opacity: 0;
        transition: opacity 0.25s ease-in-out 0s;
.menu-item a.menu-image-hovered:hover img.hovered-image {
        opacity: 1;
.menu-item a.menu-image-title-after.menu-image-not-hovered img,
.menu-item a.menu-image-hovered.menu-image-title-after .menu-image-hover-wrapper {
        padding-right: 10px;
.menu-item a.menu-image-title-before.menu-image-not-hovered img,
.menu-item a.menu-image-hovered.menu-image-title-before .menu-image-hover-wrapper {
        padding-left: 10px;

Mention that use the plugin "Custom menu image" of Wordpress to create the menu.

I put a picture to see the admin panel you can create your own classes for each menu item ... maybe it help in solving the problem.

enter image description here

We found examples on W3Schools about how to do this job but I realize I do not class must apply the background when the user has selected item.

Can you help me with some advice?


1 Answer 1


If you mean 'when the user navigates to page X by clicking it's menu button', you can use the current_page_item CSS class. Unless you want to modify the plugin code, I don't think it's possible unless you set the current_page_item img {content:...} per menu element.

  • pff fail to get along
    – Ovidiu Andrei
    Feb 13, 2015 at 19:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.