Question

我正在使用jQuery构建一个菜单，使用li标签中包含的a href标签来创建菜单项;我有一个jQuery mouseover()和mouseout()函数，它不起作用。由于该功能不起作用，我已用简单的警报替换了代码，但这似乎也没有做任何事情：

HTML：

<ul id="menu" class="menu" style="text-align: left;padding-left: 20px; padding-right: 20px;font-family: menu_local_font; color: #ffffff;font-size: 30px;padding: 20px; height: 40px">

    <a href="http://vaste-wouter/BuitengewoonGrondig2/">
       <li class="menuitem" style="float:left;;overflow:hidden;height: 40px;padding-right:30px;text-decoration:none;color: #d3005f;">
           De Vergeten Peer<br><br>test
       </li>
    </a>
</ul>

jquery的：

$(function(){
    $(".menuitem").mouseover(function(){    
        alert('over');  
        //$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    $(".menuitem").mouseout(function(){
    //    $(this).stop().animate({height:'40px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
});

Answer 1

有效清单：

<ul id="menu" class="menu">
  <li class="menuitem"><a href="">Link 1</a></li>
  <li class="menuitem"><a href="">Link 2</a></li>
  <li class="menuitem"><a href="">Link 3</a></li>
</ul>

内联样式不是最佳实践。您需要将内容与设计分开。

OR

<ul id="menu" class="menu">
   <li><a href="">Link 1</a></li>
   <li><a href="">Link 2</a></li>
   <li><a href="">Link 3</a></li>
</ul>
    $(function(){
        $("ul.menu > li").mouseover(function(){    
            alert('over'); 
        });
...

Answer 2

根本原因您的HTML层次结构中存在错误。它应该是：

<ul>
   <li>
      <a href="URL">Text</a>
   </li>
</ul>

但你有这个

<ul>
  **<a href="URL">**
      <li>
         Text<
      </li>
  **</a>**
</ul>

<强>建议：我不知道你是否只是在测试，但请记住，将所有样式放在CSS中是很重要的，避免使用style =“”标签。你也有severa冒号（;）重复，删除它们。的 CODE：以下是您运行的代码：http://goo.gl/P5vRtG

列表项无效的悬停事件

2 个答案: