javascript - OnMouseOver 下拉不来

Question

eacuser 的

onmouseOver 我想将更改密码显示为下拉列表(如附图所示)但是随着我的代码更改，我在旁边得到更改密码eacuser 链接。任何人都可以给我一些提示如何实现。我附上了两个图像文件。请检查以供引用

<div id="appLinks">
  <ul id="appLinks_list" class="nav">
    <span id="appLink_csrname" class="ui-state-default csrname"><a onmouseover="onMouseOver()">eacuser</span>
      <li id="appLink_chngpwd" class="ui-state-default chngpwd">Change Password</li>
      <li id="appLink_about" rtlOrder="3"><a href="javascript:openAboutDialog();"><img src="${link.getContextPath()}${msg.get("icon.information")}" border="0px;" align="top">About</a></li>
      <li id="appLink_logout" rtlOrder="2"><a href="$link.getContextPath()/logout.do"><img src="${link.getContextPath()}${msg.get("icon.logout")}" border="0px;" align="top">LogOut</a></li>
      <li id="appLink_help" rtlOrder="1"><a target="eachelp" href="$msg.get("eac.helpPath")"><img src="${link.getContextPath()}${msg.get("icon.help")}"  border="0px;" align="top">Help</a></li>
    </span>
  </ul>
</div>

<script>
  $(document).ready(function(){
    $(".csrname").mouseleave(function(){
      //$('#appLink_chngpwd').hide();
      $(".csrname li").css("display","none"); 
    });
    $(".csrname").mouseover(function(){
      //$('#appLink_chngpwd').show();
    $(".csrname li").css("display","block"); 
  });
</script> 

Answer 1

使用这个，

<script>
    $(document).ready(function(){ 
      $('#appLink_chngpwd').hide(); 
        $(".csrname").mouseover(function(){
      $('#appLink_chngpwd').show(); 
        }); 
          $(".csrname").mouseleave(function(){
      $('#appLink_chngpwd').hide(); 
        });
           });  
</script>