菜单项悬停动画所有其他项目不是第一个？

Posted 2023-05-08

【中文标题】菜单项悬停动画所有其他项目不是第一个？

【英文标题】：Menu item hover animate all other items not the first one?

【发布时间】：2019-11-12 14:12:21

【问题描述】：

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

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

我有下面的 CSS 动画，我想使用上面的要求。

我也有 jQuery 代码，并且使用“text-decoration”、“line-through”的逻辑可以正常工作。但是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 来实现上面的悬停效果/动画。

【问题讨论】：

一些 html 也可能有用

嗨 RoKo 只是一个简单的 html 菜单项。 首页 关于 联系方式 帮助

将您的 HTML sn-p 添加到您的问题中

【参考方案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，说明了我的意思。这只是给你一个想法....希望这会有所帮助。

【讨论】：

嗨@Eric McWinNEr 感谢您的支持。这看起来很棒，它应该如何工作。我想要通过菜单项而不是模糊效果的边框线。并且丢失了鼠标悬停的菜单项上出现的边框。我期待着您的来信……

【参考方案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>

【讨论】：

这正是我所需要的。我不知道该怎么感谢你！我一直在尝试用 JS 和 CSS 来修复它，但它从来没有奏效！太棒了，如果我可以为您留下评论或反馈，请告诉我。 @Roko C. Buljan :)