Squighopper25 Squighopper25 - 2 years ago 51
HTML Question

A certain div isn't raising an event


One HTML div isn't raising an event on mouseover as the other one does.


  • Both divs are identical in every way except id

  • My javascript code has been tested to work correctly

  • Both divs reside in the same parent container

  • Changing the event type doesn't help

[Edit] More resources

Obviously, I haven't done a very good job of this question as it hasn't been well received by some.

Here is a git repo with the full source code:


And a video of the issue:


I am actively trying to improve this question, so any suggestions are welcome.


This is basically what is happening:

<!--Necessary HTML code...-->
<div id='divA' onmouseover='abitraryJSFunction()'></div> <!--event works-->
<div i='divB' onmouseover='abitraryJSFunction()'></div> <!--event fails-->
<!-- javascript file call -->
<!--Neccisary HTML code...-->

More Specific Code:

This what I am actually trying to achieve:


<div id='leftDiv' onmouseover='showDragTab()'>
<div id='pageDiv' onmouseover='hideDragTab()'>
<div id='dragTab'>


function showDragTab()
myDragTab.style.visibility = 'visible';
function hideDragTab()
myDragTab.style.visibility = 'hidden';

Answer Source

Close your divs with and fix the second one's id. There is a typo.

<div id='divA' onmouseover='abitraryJSFunction()'></div>
<div id='divB' onmouseover='abitraryJSFunction()'></div> 


Here is a fiddle of a minimal example. You should be able to easily extend it to your case, though I would suggest breaking the mouseover events out of the dom elements and into your javascript


Edit #2

As per your updated info, see this fiddle and you can see an example of showing, hiding a div.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download