onMouseOver not triggering specific function

javascript onmouseover
determinedto3d picture determinedto3d · Nov 17, 2012 · Viewed 17.8k times · Source

I'm having a very confusing issue and I was wondering if someone could shed some light on it.

I have a DIV element ...

<div onmouseout="scrollRight();" onmouseover="scrollLeft();" id="rightScrollRegion" class="ScrollRegion"></div>

And an external script file that has ...

function scrollLeft(){
        document.getElementById('rightScrollRegion').style.background = "#0000ff";
    }

    function scrollRight(){
        document.getElementById('rightScrollRegion').style.background = "#ff0000";
    }

The problem is that the onmouseover does not seem to call the function scrollLeft(); or scrollRight(); I don't seem to understand where I made an error.

I did some testing to see if it was something in the function...

window.onload = function(){

scrollLeft();

}

Works in the external file and changes the DIV's background when the pageloads ... so function works.

I also tried changing what's called in onmouseover ...

<div onmouseover="alert('Hello');" id="rightScrollRegion" class="ScrollRegion"></div>

prints an alert window just fine.

So I thought maybe I couldn't change the background using onmouseover so I tried ...

<div onmouseover="this.style.background = '#0000ff'" id="rightScrollRegion" class="ScrollRegion"></div>

And that changes the background as expected.

But for some reason I can't get my function to trigger on the DIV. I've search all over the internet and I haven't been unable to find a solution to the issue. I can't seem to find out what I'm doing wrong. I've used external functions in other sites but never with an onmouseover so I'm not sure what could be the issue.

Any help would be greatly appreciated.

Answer

Asad Saeeduddin picture Asad Saeeduddin · Nov 17, 2012

Try this:

element = document.getElementById('rightScrollRegion');
element.addEventListener("mouseover",function(){
    this.style.background = "#0000ff";
});
element.addEventListener("mouseout",function(){
    this.style.background = "#ff0000";
});

Avoid using inline event handlers. Use the addEventListener method to attach event listeners to elements.

You can try this here: http://jsfiddle.net/gkvq8/

Related questions

getElementsByClassName to change the style of elements when event occurs

I'm trying to use onmouseover="document.getElementsByClassName().style.background='color'" to change the color of all divs with a given classname to another color when hovering over another page element. Here is a jsfiddle -if anyone could give a few …

Read More
Trigger onmouseover event programmatically in JavaScript

Is there a way to programmatically trigger the onmouseover event in plain JavaScript? or "extract" the method from the onmouseover event to call it directly? eg <div id="bottom-div" onmouseover="myFunction('some param specific to bottom-div');"> <div …

Read More
Change Text Color on mouseover

I'm hoping to accomplish this using pure CSS and Javascript. I'm ok with PHP as well. I'm avoiding jquery because I'm trying to learn javascript a bit more and I've found that in some word-press sites jquery doesn't always work …

Read More