atar.yosef Posted November 26, 2012 Share Posted November 26, 2012 (edited) Hi there Fellows!! I've encountered at a bizarre behavior at the underneath code snippet. what I've tried to do is to turn on the visibility of the second div element when the mouse hovers on the first div element. and then, when the mouse goes over the second div element, it triggers a CSS animation on the third div element. but strangely, when the mouse hovers on the second div element, it indeed triggers the CSS animation, but the second div element itself disapper although it wasn't requested to do so. can someone here figure out why does this occur and how to prevent it? any help will be appreciated!! thanks in advance!! atar. <html><head><title></title><script type="text/javascript">try{function start(){var divFirst = document.getElementById("divFirst");var divSecond = document.getElementById("divSecond");var divThird = document.getElementById("divThird");divFirst.onmouseover = function(e){divSecond.style.visibility = "visible";}divSecond.onmouseover = function(e){divSecond.style.visibility = "visible";}divSecond.onmouseover = function(e){divThird.style.width = window.innerWidth;}divThird.onmouseout = function(e){divThird.style.width = "0px";}divFirst.onmouseout = function(e){divSecond.style.visibility = "hidden";}}//end start().}//end try statement.catch(err){alert("there's an error in this page. \n the error message is:\n" + err.message + "\n the error name is: \n" + err.name + "\n and the error details are:\n" + err.constructor + "\n and the error stack is: \n" + err.stack);}//end catch statement.</script><style type="text/CSS">div#divFirst {background-color:red;}div#divSecond {background-color:blue; visibility:hidden;}div#divThird {background-color:green; -o-transition:width 1s; -webkit-transition:width 2s; width:0px; overflow:hidden;}</style></head><body onload="start()"><div id="divFirst">my first div!!</div><div id="divSecond">my second div!!</div><br /><div id="divThird">my third div!!</div></body></html> Edited November 26, 2012 by atar Link to comment Share on other sites More sharing options...
justsomeguy Posted November 26, 2012 Share Posted November 26, 2012 You're telling it to hide the second one when the mouse leaves the first one. Link to comment Share on other sites More sharing options...
atar.yosef Posted November 26, 2012 Author Share Posted November 26, 2012 @justsomeguy:Thanks for replying!!At a first glance, it seems that you are right, but if you will try to comment the line that triggers the animation, you'll notice that the second div element continue to be visible although the mouse have left the first div element. Moreover, according your words, the animation shouldn't be triggered because the second div element disappears when the mouse leave the first div element before the mouse hovers the second div element which this action triggers the animation. Thanks in advance!!Atar. Link to comment Share on other sites More sharing options...
justsomeguy Posted November 26, 2012 Share Posted November 26, 2012 Moreover, according your words, the animation shouldn't be triggered because the second div element disappears when the mouse leave the first div element before the mouse hovers the second div element which this action triggers the animation.That's exactly what you're telling it to do: divFirst.onmouseout = function(e){divSecond.style.visibility = "hidden";} That tells it to hide the second div when the mouse leaves the first one. Link to comment Share on other sites More sharing options...
atar.yosef Posted November 26, 2012 Author Share Posted November 26, 2012 @justsomeguy:Ok, so why does the CSS animation work? The code that trigger the animation is:divSecond.onmouseover = function(e){divThird.style.width = window.innerWidth;}and it don't should be executed because there's no option to hover with the mouse on the second div because when the mouse leave the first div, the second div disappear and the above code statement isn't met?Thanks in advance!!Atar. Link to comment Share on other sites More sharing options...
justsomeguy Posted November 26, 2012 Share Posted November 26, 2012 It might be firing the events for the second div before the events for the first div, or it might be that just setting the visibility to "hidden" causes the element to still be on the page and it still receives mouse events. Link to comment Share on other sites More sharing options...
atar.yosef Posted November 26, 2012 Author Share Posted November 26, 2012 @justsomeguy:Thanks for your willingness to help! I'm appreciate it!Any of the options oh have specified failed to explain the fact that the second div element triggers only one of its event listener.Look at the following code snippet: divSecond.onmouseover = function(e){divSecond.style.visibility = "visible";}divSecond.onmouseover = function(e){divThird.style.width = window.innerWidth;} Why does only the second statement get execute and the first statement isn't get executed?Thanks in advance!!Atar. Link to comment Share on other sites More sharing options...
justsomeguy Posted November 26, 2012 Share Posted November 26, 2012 The second statement replaces the event handler, it doesn't add a new one. Have one event handler with both of the lines of code you want to execute, not 2 event handlers with 1 line each. Link to comment Share on other sites More sharing options...
atar.yosef Posted November 27, 2012 Author Share Posted November 27, 2012 @justsomeguy: Thanks you very much about your kind help! I'm appreciate that!I did as you described in your last post and it worked like a magic. sincerely! atar. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now