How can I create a menu item hover animation using a combination of jQuery and CSS?
I am looking for assistance with creating menu items that have a hover effect where hovering over one item triggers an animation on all other items except the one being hovered on.
Below, I have included CSS animations that I would like to incorporate into this requirement.
I have also written jQuery code that achieves this functionality by changing the "text-decoration" property to "line-through". However, I find the line-through effect to be lacking in visual appeal. I am seeking help in combining the provided CSS and jQuery to accomplish the desired hover effect.
This task involves implementing the hover effect on WordPress menu items.
jQuery(".menu-menu-container ul li").hover(function() { // Mouse over
jQuery(this).siblings().stop().css("text-decoration", "line-through");
jQuery(this).parent().siblings().stop().css("text-decoration", "none");
}, function() { // Mouse out
jQuery(this).siblings().stop().css("text-decoration", "none");
jQuery(this).parent().siblings().stop().css("text-decoration", "none");
});.overlay-content ul li a:hover:after,
.overlay-content ul li a:focus:after,
.overlay-content ul li a:active:after {
width: 40%;
background: #000;
}
.overlay-content ul li a:after {
content: '';
position: absolute;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 2%;
margin-top: 3.2%;
background-color: transparent;
transition: .35s;
}<div class="menu-menu-container">
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">Contact</a> </li>
<li> <a href="#">Help</a> </li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>I am looking to merge the CSS and jQuery provided above to achieve the desired hover effect and animation on the menu items as described.