MouseOver上的DropDown

Question

onmouseOver of 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

您可以尝试仅通过CSS执行此操作，因为您需要编辑标记。

Check this demo

CSS

#appLinks_list ul {
  position: absolute;
    left: 0;
  top:30px;
  width: 60px;
  list-style: none;
  display: none;
}
#appLinks_list li:hover ul {
  display: block;
  background: #ccc
}
#appLinks_list li:hover {
  background: #ccc
}

我刚刚添加了显示:hover下拉列表的最小代码。

Answer 2

据我所知，使用这样的代码。将div id替换为div id。

$( "#appLink_csrname" ).mouseover(function() {
  $('#changepasswordDivId').show();
});
$( "#changepasswordDivId" ).click(function() {
  $('#popup').show();// use facebox or fancy box code that you are using for popup here.
});

Answer 3

我认为这是你的HTML代码，观看范围和标签的错误

<ul id="appLinks_list" class="nav">
    <span id="appLink_csrname" class="ui-state-default csrname"><a href="#">eacuser</a>

    <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>

然后

<script>
$(document).ready(function(){
    $('.csrname').bind('mouseenter', function () {
        $('.csrname', '#appLink_csrname').show()
    }
    $('.csrname').bind('mouseleave', function () {
        $('.csrname', '#appLink_csrname').hide()
    }
})
</script>