jquery - 菜单项悬停动画所有其他元素不是第一个？

Question

使用 jQuery 或 CSS 或两者的组合来制作菜单项悬停动画。

我需要菜单项方面的帮助。例如。将鼠标悬停在其中一个菜单项上，所有其他菜单项都会获得悬停动画，但鼠标悬停的菜单项不会。

下面有 CSS 动画，我想将其与上述要求一起使用。

我也有 jQuery 代码，使用“text-decoration”、“line-through”时逻辑工作正常。但是直通是很差的 CSS，我想结合下面的 CSS 和 jQuery 来实现上面的效果。

这是针对 WordPress 菜单项的。

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>

我想结合 CSS 和 jQuery 来实现上面的悬停效果/动画。

Answer 1

我不会在 jQuery 本身中添加 css 样式，而是根据事件添加和删除类。它使您能够更强大地使用 CSS 功能。像这样的东西，

jQuery(".menu-menu-container ul li").hover(function() { // Mouse over
    jQuery(this).addClass("hovered");
    jQuery(this).siblings("li").addClass("notHovered")
  }, function() { // Mouse out
    jQuery(this).siblings().stop().removeClass("notHovered"); 
    jQuery(this).removeClass("hovered")
  });

和 CSS:

.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;
}

.menu-menu-container 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;
}

.menu-menu-container{
    width: 100%;
    background-color: black;
    padding: 0 7.5px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.5)
}

.menu-menu-container li{
  display: inline-block;
  list-style: none;
  padding: 15px;
  border-top: 3px solid transparent;
  border-left: none;
  border-right: none;
  font-family: 'Poppins', sans-serif


}

.notHovered{
  filter: blur(2px);

}

li.hovered{
  border-top-color: white
}

.menu-menu-container a{
  text-decoration: none;
  color: white;
  font-size: 1rem;
}
.menu-menu-container li, .menu-menu-container *{
  transition: 1s;

}

这是一个非常基本的 codepen表明我的意思。这只是给你一个想法......希望这会有所帮助。