OnMouseOver下拉不来

Question

onmouseOver eacuser我希望将更改密码显示为下拉列表（如附图中所示），但随着我的代码更改，我在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>

Answer 2

在您的代码中，您使用了以下内容。

 $(".csrname li").css("display","none"); 

这意味着您正在为具有类.csrname

的span的子属性显示none

目前在您的代码中，＆＃34;更改密码＆＃34;是兄弟元素而不是孩子。

所以改变你的代码如下。

 $(".csrname + li#appLink_chngpwd").css("display","none");