將鼠標懸停在大型菜單鏈接上時，如何更改父html元素的css溢出屬性

Question

因此，我在Wordpress網站中使用了超級菜單，並且需要在超級菜單上方更改一個元素，以將鼠標懸停在超級菜單項上時具有可見的溢出CSS。 到目前為止，這是我嘗試過的。

      <div class="l-canvas">
        <div id="mega-menu-wrap-max_mega_menu_2" class="mega-menu-wrap">
         <div class="mega-menu-toggle" tabindex="0">
          <div class="mega-toggle-block mega-menu-toggle-block mega-toggle-block-right mega-toggle-block-1" id="mega-toggle-block-1">
          </div>
         </div>
        <ul id="mega-menu-max_mega_menu_2" class="mega-menu mega-menu-horizontal" data-event="hover" data-effect="fade_up" data-effect-speed="200" data-second-click="close" data-document-click="collapse" data-vertical-behaviour="standard" data-breakpoint="979" data-unbind="true">
          <li class="mega-menu-item mega-menu-item-type-taxonomy mega-menu-item-object-product_cat mega-menu-item-has-children mega-align-bottom-left mega-menu-flyout mega-menu-item-10217" id="mega-menu-item-10217">
<a class="mega-menu-link" href="#" aria-haspopup="true" tabindex="0">Link Text</a>
          </li>
        </ul>
       </div>
     </div>

而且CSS非常簡單

 .l-canvas{
     overflow:hidden;
    }

JavaScript是我遇到麻煩的地方。 這是我在小提琴中所做的工作，但無法弄清楚頁面上出了什么問題。

$('.l-canvas').on('mouseover', '.mega-menu-item', function () {
    $('.l-canvas').css('overflow', 'visible')
});
//remove the overflow visible on mouseout
$('.l-canvas').on('mouseout', '.mega-menu-item', function() {
    // on mouseout, reset the overflow to hidden
    $('.l-canvas').css('overflow', 'hidden');
  });

我想我已經接近了，但似乎無法克服最后的坎h。 我只是不明白為什么它不能在我的頁面或開發人員工具的控制台中工作。 感謝您的幫助和反饋，您可以就此問題給我。

Answer 1

嘗試這個：

$(".mega-menu-item").on({
   mouseenter: function() {
      $(this).closest(".l-canvas").css('overflow', 'visible');
   }, mouseleave: function() {
      $(this).closest(".l-canvas").css('overflow', 'hidden');
   }
});

請查看JQuery文檔以獲取詳細信息：

• http://api.jquery.com/on/
• https://api.jquery.com/closest/

首先，您將想聽聽進入或離開菜單項時發生的事件。 接下來，您將要在DOM上找到一個特定的元素並操縱該元素的CSS。

希望這可以幫助！