Javascript 如果不同元素上存在指定的类，则添加/删除类

在上，当我将鼠标悬停在导航栏中的菜单项上时，我尝试为我的子菜单实现淡入淡出效果，当鼠标悬停在菜单项上时，尝试实现淡出淡出效果（如“开”）。我已经设置好了动画，我已经编写了一些Javascript，这让我更接近我想要的结果，但是背后的逻辑是错误的，所以这都是错误的。这是我当前的Javascript代码：

$(document).ready(function () {
    $('ul.elementor-nav-menu li.menu-item a').hover(
      function () {
        $('ul.sub-menu').removeClass('animated fadeOutDownSmall');
        $('ul.sub-menu').addClass('animated fadeInUpSmall');
      },
      function () {
        $('ul.sub-menu').removeClass('animated fadeInUpSmall');
        $('ul.sub-menu').addClass('animated fadeOutDownSmall');
      }
    );
  });

---

因此，基本上，当我将鼠标悬停在菜单项上时，它会将“fadeInUpSmall”类添加到具有类“sub-menu”的ul元素中，当我的鼠标离开鼠标悬停在菜单项上时，它会删除类“fadeInUpSmall”，并添加类“fadeOutDownSmall”。您可以看到这是如何不起作用的，就像我移动鼠标来导航子菜单/megamenu一样，它们开始闪烁、淡入和淡出等。但是，当我将鼠标悬停在具有子菜单的菜单项上时，您可以在inspect元素中看到类“突出显示”被添加到相应的“a”标记中。因此，我的问题是，如何修改我提供的Javascript代码，以便它发现“a”元素上是否存在“突出显示”的类，并分别添加/删除fadeInUpSmall和fadeOutDownSmall类？

鼠标进入和鼠标离开
鼠标指针


有课

可能需要使用它，反之亦然，这取决于您希望如何使用它。

CSS可以这样工作

.dropdown{
  height:0%;
  opacity:0;
  transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
}
.dropdown.active:hover {
  height:100%;
  opacity:1
}

---

如果这一切都是在你悬停的时候发生的。我认为你应该尝试用CSS来实现你的目标。如果没有进一步的背景知识或视觉效果，这个问题很难理解。这是显示悬停上的下拉列表吗？这只是为了在我们悬停时从底部显示一些文本吗？你的功能在鼠标悬停时启动了这两个功能。当鼠标悬停在导航菜单项上时，我试图给我的子菜单一个淡出效果，当鼠标离开鼠标悬停在菜单项上时，子菜单具有淡出效果。我确实发送了一个我想要达到的效果的示例，以及一个指向我的站点和Javascript代码的链接，以显示我在尝试实现效果方面的进展。mouseEnter和mouseLeave呢？我必须对此进行一些研究。我对Javascript不是很在行。我还将限制在鼠标进入时添加一个类，鼠标离开时删除同一个类。祝你好运我不确定这是否与我最初提供的代码有任何不同？我认为让我试图实现的工作方式是找到“a”元素中是否存在“突出显示的”类，如果存在，则将类“animate”和“fadeInUpSmall”添加到具有类“sub-menu”的ul元素中。我不确定这是否有意义？但是这样做可能吗？如果没有视觉效果，很难理解，但是如果元素在JQuery中有类，那么应该使用下面的内容来搜索。我发布了一个hasClass编辑

.dropdown{
  height:0%;
  opacity:0;
  transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
}
.dropdown.active:hover {
  height:100%;
  opacity:1
}