Image hover behind text "jumpy"

[jessfelt]

I added an image on hover behind the text in my main and secondary menus. When my mouse goes over the text the image appears as desired, but it seems like it moves with my mouse as I hover. Please help!

http://www.tep.jamandjuice.net/

[neilgee]

This is because of the default CSS for transitions.

If you change your style.css at line 2755 to

.nav-primary li.current-menu-item a {
    background: url('http://www.tep.jamandjuice.net/wp-content/uploads/2015/12/hover.png') no-repeat center;
}

.nav-primary li.menu-item a:hover {
    background: url('http://www.tep.jamandjuice.net/wp-content/uploads/2015/12/hover.png') no-repeat center;
    transition: none;
}

.nav-secondary li.current-menu-item a {
    background: url('http://www.tep.jamandjuice.net/wp-content/uploads/2015/12/hover.png') no-repeat center;
}

.nav-secondary li.menu-item a:hover {
    background: url('http://www.tep.jamandjuice.net/wp-content/uploads/2015/12/hover.png') no-repeat center;
    transition: none;

}

Here we are setting the 2 menus links to have no transitions on hover.

---

Neil Gee
WP Beaches
Coolest Guides

[jessfelt]

Thank you!

[Author]

Posts