2

我正在尝试使用 zurb Foundation 5 下拉菜单实现 hoverIntent。问题是基础菜单在悬停时立即触发。这在使用大型菜单时会导致问题。

由于颜色变化，我可以看到我的事件触发器，但它不会影响巨型可见的悬停状态的时间。

示例可以在..foundation.myplumbingshowroom.com/testing.HTML查看

<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){$(".hovering").hoverIntent(hoverIn,hoverOut)}); 
 function hoverIn(){$(this).attr("data-options","is_hover:true").css('color', 'red');}
 function hoverOut(){$(this).attr("data-options","").css('color', 'white');}
</script>

<li class="hide-for-medium-down"><a class="hovering" aria-expanded="false" href="#" data-dropdown="menu-1" data-options="is_hover:true" ><strong>Ceiling Lights</strong></a>
 <div aria-hidden="true" style="position:absolute" id="menu-1" data-dropdown-content="" class="mega f-dropdown content row">
   <div class="row">
    <div class="small-3 columns"><img src="http://placehold.it/800x550&text=Image" alt=""/></div>
    <div class="small-3 columns">
     <ul>
       <li><label>Heading 1-1</label></li>
       <li><a href="#">Link 1</a></li>
       <li><a href="#">Link 2</a></li>
       <li><a href="#">Link 3</a></li>
       <li><a href="#">Link 4</a></li>
     </ul>
    </div>
   </div>
  </div>
 </li>
4

0 回答 0