Javascript 删除a<；部门>；元素，同时将鼠标悬停在另一个元素上

我在写我的网站时遇到了一个问题

我试图做的是，当用户将鼠标悬停在“照片”按钮上时，使左侧

.split

类中的菜单消失

目前，它实际上不起作用（代码不在实际的网站上，我正在自己的文本编辑器中尝试这一点，它似乎不起作用。）

下面是我正在尝试实现的代码（我读过应该可以实现）

此外，我是否可以实现animate.css来设置菜单的动画

下面是我当前的.split类的代码

.split {
    height: 100%;
    width: 40%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    padding-top: 0px;
}

HTML代码：

 <!---Main Site Slide in--->
   <div class="split left wow fadeInLeftBig animated" data-wow-duration="2s">
     <div class="centered wow ">
       <h1>####</h1>

       <p> ### </p>

    <p> #### </p>
  <div class='divider'></div>
  <div class='container'>
    <a href="" style="text-decoration:none"><h2>Previous Projects: </h2></a>

    <ul id="projects">
      <li>-Selected project 1-</li>
      <li>-Selected project 2-</li>
      <li>-Selected project 3-</li>
    </ul>
  </div>

####
####

#####


-选定项目1-
-选定项目2-
-选定项目3-

使用

时：悬停在“+”之后的div/id应该是
#按钮的子项（div/id内部）

您最好使用jQuery将类添加到要生效的Div中


$（“.photos”）。悬停(
函数（）{
$（“.menu”）.addClass（“悬停”）；
}，函数（）{
$（“.menu”）.removeClass（“悬停”）；
}
);
正文{
显示：内联flex；
}
div{
宽度：200px；
高度：200px；
不透明度：1；
-webkit转换：所有2；/*Safari*/
-moz转换：所有2；/*Mozilla firefox*/
-ms过渡：全部2；/*谷歌浏览器*/
过渡：所有2；
}
.菜单{
背景色：红色；
位置：相对位置；
左：0px；
}
.照片{
背景颜色：蓝色；
}
.悬停{
/*宽度：0px；可以执行宽度：0；或仅将对象移出视图*/
不透明度：0；
左：-200px；
}

菜单
照片
URL未为我加载。连接超时。（复制并粘贴链接，因为它似乎没有使用超链接打开）HTML在哪里？您应该始终在问题本身中包含代码，而不是将链接用作主要参考。如果以后它坏了怎么办？请提供其他CSS类，您的代码应该最少运行，这样我们就可以帮助您了。@blank\u我发布了一个答案，希望它能有所帮助？
 <!---Main Site Slide in--->
   <div class="split left wow fadeInLeftBig animated" data-wow-duration="2s">
     <div class="centered wow ">
       <h1>####</h1>

       <p> ### </p>

    <p> #### </p>
  <div class='divider'></div>
  <div class='container'>
    <a href="" style="text-decoration:none"><h2>Previous Projects: </h2></a>

    <ul id="projects">
      <li>-Selected project 1-</li>
      <li>-Selected project 2-</li>
      <li>-Selected project 3-</li>
    </ul>
  </div>