Struggling with onmouseover and onmouseout

Question

I am struggling with onmouseover and onmouseout.

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.

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:

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();

I coded this in my browser and when I copied it to jsFiddle to ask this question it wouldn’t load the small div on load, but it did log the statements. I put it on CodePen and it worked as I have described. Not sure what caused this but this is the second time this has happened.

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.

As always, any help is appreciated.

Does this problem seem to be browser specific? Which browsers have you tested this in? — SnareChops, Dec 27 '12 at 05:38
I never thought of trying different browsers, but it is working as described on firefox, IE9, Chrome and Safari. I haven't downloaded Opera yet. — user1929081, Dec 27 '12 at 05:48
So in all the browsers you listed above it is firing both functions immediately, correct? — SnareChops, Dec 27 '12 at 05:52
I have heard of this happening before and I have yet to find a reason, I'll keep looking and if you happen to find the answer, please let me know. — SnareChops, Dec 27 '12 at 05:57
buddies, he had a syntax error while assigning functions to onmouseover and onmouseout events! :) — Muhammad Talha Akbar, Dec 27 '12 at 06:00
Just downloaded Opera and it is working as described there, as well. Kind of disconcerting how it grabbed my firefox bookmarks without me even knowing it! lol — user1929081, Dec 27 '12 at 06:00

score 3 · Accepted Answer · answered Dec 27 '12 at 05:58

3

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; // here you don't need "()" with your defined functions
introEl.onmouseout = smallDiv; // here you don't need "()" with your defined functions

answered Dec 27 '12 at 05:58

Muhammad Talha Akbar

9,952
6
38
62

YES! Accept that it seems VERY sensitive. If I move the mouse too quickly it fires off several times. Not just my mouse, it happened the same with the touch pad. But at least it waits for me to mouse over! Thank you very much. – user1929081 Dec 27 '12 at 06:15

ameya rote · Answer 2 · 2012-12-27T06:13:11.443

2

Please go to following fiddle i have made some small changes and its working fine for me

fiddle

Also You could have used

<div id="intro" onmouseover="largeDiv();" onmouseout="smallDiv();">
    Mouse over this text
</div>

See working example here fiddle 2

edited Dec 27 '12 at 06:13

answered Dec 27 '12 at 05:58

ameya rote

1,116
1
9
13

Struggling with onmouseover and onmouseout

2 Answers2