Question

假设我有一个结构不合理的下拉菜单，类似于：

<div class="regular"><a href="#">title</a></div>
<div class="menu">
    <a href="#">title</a>
    <div class="menu_wrapper">
        <a href="#">sub title</a>
        <a href="#">sub title</a>
    </div>
</div>

在这种情况下，它使用.menu_wrapper构建，其属性为position:absolute;，从而导致顶层.menu悬停在.menu_wrapper isn'的情况t被认为是同一元素的一部分，因此当试图将鼠标悬停在它上面时会导致中断，因为它不再是同一个悬停事件的一部分。

我想知道是否可以在.menu上设置事件活页夹，但是一旦事件被触发，将绑定器明确地扩展到.menu_wrapper，以便“悬停效果”稳定并且正常工作

这似乎比尝试重新安排我所拥有的大量结构不合理的CSS更容易解决。

任何想法，意见，帮助一般都会受到高度赞赏;）。

Answer 1

你尝试过这样的事吗？（jQuery的）

$(".menu").hover(
  function () {
    $(".menu_wrapper").show();
  },
  function () {
    $(".menu_wrapper").hide();
  }
);

Answer 2

我设法通过同时使用mouseover / mouseout事件解决了这个问题。

这绝对不是解决这个问题的最有效方法，但它是一个不错的解决方案：

   $('div.menu').mouseover(function() {
       $(this).find('div.menu_wrapper').show();
   });

   $('div.menu_wrapper').mouseout(function() {
       $(this).hide();'
   });

是否可以触发然后将事件扩展到另一个元素？

2 个答案: