title: Struggling with onmouseover and onmouseout
body: <p>I am struggling with onmouseover and onmouseout.</p>
  
  <p>Every site I have been to shows this syntax almost exactly. I practically copied pasted it from Mozilla. The problem I’m having is that it calls the largeDiv and smallDiv functions immediately.  (Eventually, I am hoping to apply a new class to the div when during the mouseover event, and return to the old class when mouseout.) I am pretty sure that my mouse events are to blame. I was also wondering if my onload function caused any problems, but when I commented it out, the only thing that changed was the small div did not load, as expected.</p>
  
  <p>I tried to use an event listener, thinking I wasn’t calling the event properly, but that did not work at all, although I am not sure I coded it properly, and didn’t spend more than an hour on the damn thing! I have tried numerous tweaks, camelcasing onmouseover, using parenthesis, etc… Anyway, here is the code:</p>
  
  <pre><code>var introEl = document.getElementById("intro");
  
  //display large div by default and 
  //use small div with js enabled
  window.onload = function(){
      introEl.className = "small";
  }
  
      function largeDiv(){
      console.log("It Worked");
  };
  
      function smallDiv(){
      console.log("Mouse Out!");
  };
  
  introEl.onmouseover = largeDiv();
  introEl.onmouseout = smallDiv();
  </code></pre>
  
  <p>I coded this in my browser and when I copied it to <a href="http://jsfiddle.net/hGQL7/" rel="nofollow">jsFiddle</a> to ask this question it wouldn’t load the small div on load, but it did log the statements. I put it on <a href="http://codepen.io/joe/pen/GxeaC" rel="nofollow">CodePen</a> and it worked as I have described. Not sure what caused this but this is the second time this has happened.</p>
  
  <p>By the way, if you go to CodePen or jsFiddle, I know my design skills are lacking. I am just doing this for a playground, and for a place to keep code that works, like a notebook. I promise you it will get much much worse.</p>
  
  <p>As always, any help is appreciated.</p>