Jump to content

strange JS function and CSS behavior


atar.yosef

Recommended Posts

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 by atar
Link to comment
Share on other sites

@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

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

@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

@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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...