javascript - DIV appear/disappear on mouse enter/leave -


I'm trying to create a navigation using jQuery. I am very new to jQuery, so I'm stuck here a little bit.

What I'm trying to do is testbutton2 and when I turn the mouse on / off Testbutton 1. I was able to work with the mouse / to get it.

The part I am trying to add to testbutton2 is visible when I have a mouse on testbutton 2 and testbutton 2 appears if I return the cursor to Testbutton1 - hence only one Fade or out at the same time

CSS

  # Testbutton1 {float: left; Height: 100px; Width: 100px; Background: # 69C; } #Testbutton2 {float: left; Height: 100px; Width: 100px; Background: # 0C6; display none; }  

HTML

  & lt; Div id = "testbutton1" & gt; & Lt; / Div & gt; & Lt; Div id = "testbutton2" & gt; & Lt; / Div & gt;  

jQuery

$ ("#bestbutton1") ({Mousecenter: function () {$ ("# Testbutton2"). FadeIn ();}, mouseleave: function () {$ ("# testbutton2"). FadeOut ();},}); $ ("# Testbutton2") ({Mouseenter: function () {$ ("# testbutton2"). FadeIn ();}, mouseleave: function () {$ ("# testbutton2"). FadeOut ();},});

JSFiddle

You can do something like

  $ (" # testbutton1 "). ({Mousecenter: function () {$ ("# testbutton2"). FadeIn ();}, mouseleave: function () {var $ target = $ ("# testbutton2"); // to see if the mouse Second button var timer = setTimeout (function () {$ target.stop true, true). FadeOut ();}, 200); $ Target.data ('hoverTimer', timer);}}); On $ ("#Testbutton2") ({mousecenter: function () {// If the mouse is moved inside, then clear the timer so that it will not clear the hidden timeout ($ (this) .Data ('Hover Timer '); $ (This) .stop (true, true) .Fedine ();}, mouseleave: function () {$ (this) .stop (true, true). FadeOut ();}});  

Demo:


Comments

Popular posts from this blog

Member with no value in F# -

java - Joda Time Interval Not returning what I expect -

c# - Showing a SelectedItem's Property -