Javascript Mouseover and mouseout actions

Question

I have a code like;

<asp:HyperLink ID="hl" onmouseover="ShowDiv();" onmouseout="HideDiv();" runat="server"/>
<div ID="divid" onmouseover="ShowDiv();" onmouseout="HideDiv();">Test</div>

I want the the hyperlink to show the divid when mouse is over it and at the same time if the user moves the pointer over div the div will not close and will continue to show, but if the user moves the cursor out of div and hyperlink the div will close. What can i implement inside ShowDiv() and HideDiv() functions.

Thank You..

Edit:The divid visibility is set to false at the beginning and it shows when mouse moves over the hyperlink

score 1 · Accepted Answer · answered Jul 18 '11 at 08:06

1

I could give you the exact answer, but I'd like you to read this article on jQuery's mouseenter and also mouseleave and you will definitely find your answer there (and also learn!) :)

answered Jul 18 '11 at 08:06

vinceh

3,490
1
21
24

Thank you so much for the answer @vinceh , this is what exactly i m looking for, but i want one more thing. I implemented mouseenter and mouseleave functions but the problem is when mouse leaves the hyperlink and goes some other area the div is closed this is ok. But when mouse leaves the hyperlink and goes over the divid it must not close but it is closing how can i prevent this ? – aeciftci Jul 18 '11 at 08:36

score 1 · Answer 2 · answered Jul 18 '11 at 08:17

1

Hope That Link Can Help Also

answered Jul 18 '11 at 08:17

Youssef Hussein

11
1

score 0 · Answer 3 · answered Jul 18 '11 at 08:06

If you're using jQuery, you could use the hide() and show() functions.

<asp:HyperLink ID="hl" onmouseover="$('#divid').show();" onmouseout="$('#divid').hide();" runat="server"/>
<div ID="divid" onmouseover="$('#divid').show();" onmouseout="$('#divid').hide();">Test</div>

Javascript Mouseover and mouseout actions

3 Answers3