Animate the Menu Icon on Text Mouseover

  • Hello,

    I am struggling with this situation, and can’t really find a solution, but I’m sure it will be quite easy (I’m a newbie).

    I added icons (dashicons) to my menu items and successfully animated them to respond to a mouseover event:

    .menu-item i._mi {
	-webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
	position:relative;
  }

.menu-item i._mi:hover {
	-webkit-transform: translate(0.3em,0);
            -moz-transform: translate(0.3em,0);
            -o-transform: translate(0.3em,0);
            -ms-transform: translate(0.3em,0);
        }

    But my goal was to trigger this animation not only when we mouseover the icons, but also when we mouseover the menu item’s text.

    This is the HTML code I checked with Inspector:

    <div class="menu-primary-menu-container">
<ul id="menu-primary-menu" class="nav-menu">
<li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59">
<a href="https://localhost/wordpress/index.php/tastemakers/">
<i class="_mi _before dashicons dashicons-arrow-right-alt2"></i>
<span>Tastemakers</span>
</a>

    Any ideas on how to achieve this?
    Thanks in advance!

Viewing 3 replies - 1 through 3 (of 3 total)

  • Try applying your css to .menu-item, rather than to .menu-item i._mi. i.e. take out the i._mi in the above css, so it looks like this:

    .menu-item {... }

.menu-item:hover {... }
    Thread Starter PaulaRodrigues

    (@paularodrigues)

    Hello – thanks for the reply and suggestion!

    Tried it, but with that code, the :hover effect moved both the icon and the link menu text at the same time.

    What I was aiming for was to move only the icon when I :hover the link menu text.

    Any other suggestion?

    Thanks for the help!

    I’m not very expert at JavaScript/jQuery but I think you need to add something similar to this:

    $(“.menu-item”).hover( function() { $(i._mi).addClass(“hovered”) } );

    Then in your css file add the .hovered class with the effect you want.

    Not sure if that will work as is, coz as I said I’m not great at JS, but it might give you a nudge in the right direction.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Animate the Menu Icon on Text Mouseover’ is closed to new replies.