1

假设我有一个结构很差的下拉菜单,类似于:

<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不被视为同一元素的一部分,因此当试图将其悬停在它上面时会导致中断,因为它不再是一部分相同的悬停事件。

我想知道是否可以打开事件绑定器,.menu但是一旦触发事件,将绑定器扩展为.menu_wrapper显式,以便“悬停效果”稳定且有效。

这似乎是一个比尝试重新排列我拥有的大量结构不佳的 CSS 更简单的解决方案。

任何想法,意见,一般的帮助将不胜感激;)。

4

2 回答 2

0

你有没有尝试过这样的事情?(jQuery)

$(".menu").hover(
  function () {
    $(".menu_wrapper").show();
  },
  function () {
    $(".menu_wrapper").hide();
  }
);
于 2012-11-14T12:45:57.847 回答
-1

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

这绝对不是处理这个问题的最有效方法,但它是一个不错的解决方法:

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

   $('div.menu_wrapper').mouseout(function() {
       $(this).hide();'
   });
于 2012-11-14T12:58:20.060 回答