Jump to content

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 post
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 post
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 post
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 post
Share on other sites

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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...