Question

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

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

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

我也有jQuery代码，使用“文本装饰”，“直通”可以使逻辑工作正常。但是直通是非常差的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，显示了我的意思。只是给您一个主意。...希望有帮助。

Answer 2

您根本不需要任何JS！只需在UL悬停上设置样式，然后在每个A悬停上分别设置样式：

.menu-menu {
  padding: 0;
}

.menu-menu a {
  text-decoration: none;
  text-align: center;
  display: block;
  /* Relative, we can now use absolute elements inside */
  position: relative;
}

.menu-menu a:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -2px;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background-color: #000;
  transition: .35s;
}

.menu-menu:hover a:after {
  width: 100%;
}

.menu-menu a:hover:after,
.menu-menu a:focus:after,
.menu-menu a:active:after {
  width: 0%;
  background: #000;
}

<ul class="menu-menu">
  <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>

菜单项是否悬停使所有其他项（而不是第一个）动画？

2 个答案: