Javascript 在鼠标悬停时显示下拉菜单并替换CSS类

需要使用JS操作的两个元素：

<li class="navTab myFirstTab Popup PopupControl PopupOpen PopupContainerControl">

对于上述元素：
我希望onmousehave替换类值：
PopupClose与PopupOpen

<div class="Menu JsOnly tabMenu myFirstTabLinks" id="XenForoUniq0" style="display: block; visibility: visible; top: 96px; left: 960.5px;">

同时，将上述元素样式属性的值更改为：
显示：无；显示：块；

HTML结构示例：

<ul class="publicTabs navLeft">
    <li class="navTab forums selected">
     <a href="#" class="navLink">Home</a>
     <a href="#" class="SplitCtrl" rel="Menu"></a>
    </li>                                   

    <li class="navTab myFirstTab Popup PopupControl PopupClosed     PopupContainerControl">
      <a href="#" class="navLink">On hover I should have a DropDown</a>
      <a href="#" class="SplitCtrl" rel="Menu"></a>
    </li>

     <li class="navTab mySecondTab Popup PopupControl PopupClosed PopupContainerControl uix_rightMost">
        <a href="#"  class="navLink">On hover I should have a DropDown​2</a>
        <a href="#" class="SplitCtrl"      rel="Menu"></a>
     </li>
                            <!-- members -->
                            <!-- extra tabs: end -->
                            <!-- responsive popup -->
                            <li class="navTab navigationHiddenTabs navTab--j    justIcon Popup PopupControl PopupClosed PopupContainerControl" style="display: none;">
                                <a rel="Menu" class="navLink NoPopupGadget uix_dropdownDesktopMenu"><i class="uix_icon uix_icon-navOverflow"></i><span class="uix_hide menuIcon">ham</span></a>
                            </li>

</ul>


 <!-- START DropDown-->
 <div class="Menu JsOnly tabMenu myFirstTabLinks" id="XenForoUniq0"   style="display: none; visibility: visible; top: 96px; left: 960.5px;">
     <div class="primaryContent menuHeader">
         <h3>My First drop down menu title</h3>
     </div>     

<ul class="secondaryContent blockLinksList">
       <li><a href="#">item1</a></li>
       <li><a href="#">item2</a></li>
   </ul>
</div>

<div class="Menu JsOnly tabMenu mySecondTabLinks" id="XenForoUniq1"     style="display: none; visibility: visible; top: 76px; left: 879.5px;">
     <div class="primaryContent menuHeader">
           <h3>My Second drop down menu title</h3>
     </div>

 <ul class="secondaryContent blockLinksList">
      <li><a href="#">item1</a></li>
      <li><a href="#">item2</a></li>
      <li><a href="#">item3</a></li>
 </ul>                                      
</div>

<!-- FINISH DropDown -->

我的第二个下拉菜单标题

将数据目标属性添加到tablinks div。。如下所示

<li class="navTab myFirstTab Popup PopupControl PopupClosed  PopupContainerControl" data-target="myFirstTabLinks">
<li class="navTab mySecondTab Popup PopupControl PopupClosed  PopupContainerControl" data-target="mySecondTabLinks">

---

将数据目标属性添加到tablinks div。。如下所示

<li class="navTab myFirstTab Popup PopupControl PopupClosed  PopupContainerControl" data-target="myFirstTabLinks">
<li class="navTab mySecondTab Popup PopupControl PopupClosed  PopupContainerControl" data-target="mySecondTabLinks">

---

您希望悬停事件发生在哪个元素上？

myFirstTab

类将包含

myFirstTabLinks

的下拉列表，而

mySecondTab

类将包含

mySecondTabLink

的下拉列表，检查已编辑的答案您想要悬停事件的元素是什么？

myFirstTab

类将带有

myFirstTabLinks

的下拉列表，

mySecondTab

类将带有

mySecondTabLink

的下拉列表，检查已编辑的答案是。。。这就是你应该做的。jquery代码在navlink悬停时不起作用，什么都没有发生，应该应用于：`

`抱歉。。我的行为正好相反。。请稍等。。我正在编辑我的代码谢谢，PopupClosed现在被mousehover上的PopupOpen所取代，尽管display:block；没有生效。我添加了数据目标，也在鼠标上方，两个导航链接将它们的类PopupClosed替换为PopupOpen，我只想要一个是activeLet我们。是的。。。这就是你应该做的。jquery代码在navlink悬停时不起作用，什么都没有发生，应该应用于：`

`抱歉。。我的行为正好相反。。请稍等。。我正在编辑我的代码谢谢，PopupClosed现在被mousehover上的PopupOpen所取代，尽管display:block；没有生效。我在mousehover上添加了数据目标，两个导航链接都将它们的类PopupClosed替换为PopupOpen，我只想要一个是activeLet我们。