DropDown on MouseOver

Question

onmouseOver of eacuser i want to show the change password as a dropdown(as can seen in attached image) but with my code changes i am getting change password next to eacuser link.Can anyone please give me some hint how to achieve.I attached the two image file.please check for reference below image is with my code change actually i want in this way

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

Any help would be appreciated

just added the mouseover function but how to achieve display change password functionality not getting eacuser — Uday Konduru, Jun 08 '14 at 08:13
possible duplicate of [How do I check if the mouse is over an element in jQuery?](http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery) — Djizeus, Jun 08 '14 at 08:16

Tushar · Answer 1 · 2014-06-09T10:53:18.057

1

You can try doing this only by CSS, for that you need to edit you Markup.

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
}

I have just added the minimum code for showing dropdown on :hover.

edited Jun 09 '14 at 10:53

answered Jun 09 '14 at 10:44

Tushar

4,280
5
24
39

score 0 · Answer 2 · answered Jun 08 '14 at 08:14

0

from what i understand, use code like this.replace the div id's with your div ids.

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

answered Jun 08 '14 at 08:14

Anju Aravind

3,262
2
16
22

but i dont have #changepasswordDivId' in my code, thats why im trying to know how can i add this particular id so that i can able to see the change password link – Uday Konduru Jun 08 '14 at 09:37

score 0 · Answer 3 · answered Jun 09 '14 at 10:04

I think it's although fault in your html code, watch span and a tags

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

then

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

DropDown on MouseOver

3 Answers3