Jquery节点未选择ID元素

Question

我被一些我无法处理的事情困住了。我试图在元素悬停时添加一个类。我正在使用 Jquery，因为我已经在我的网站的另一部分完成了。

 $(document).ready(function(e) {   
  $("#filters-section").hover(function(){
    $("#filters-section").addClass("hover-filter");
    }, function(){
    $("#filters-section").removeClass("hover-filter");
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <section id="wrapper-catalog">
    <div id="filters-section">
      <div class="filter-content">
        <div class="title-page">
          <h2>Nos catalogues</h2>
         </div>
         <div class="filters">
          <div class="show-filter">
            <font-awesome-icon icon="fa-solid fa-circle-plus" />
             <p>Afficher les filtres</p>
             <CatalogFilters/>
           </div>
             <p>Effacer les filtres</p>
          </div>
         </div>
       </div>
   <div id="catalog-content">
      <MainCatalog />
      <SupplierCatalog />
   </div>
  </section>
</main>

我不知道这是否是嵌套元素的链接。但是当我尝试触摸包装器 ID 时它也不起作用。

任何想法？

感谢您的帮助，