Basically a toggle. I have this button:
<button id='btn'>Hover, don't click</button>
And this js:
function changeColor () {
document.getElementById('btn').style.color = 'red';
}
Now:
document.getElementById('btn').addEventListener('mouseover', changeColor);
Worked as commanded, but:
document.getElementById('btn').removeEventListener('mouseout', changeColor);
Disobedient. JS Fiddle thought all are behaving correctly: http://jsfiddle.net/jimges/roq9x1os/
I disagree. Thanks!
Try this:
var btn = document.getElementById('btn')
btn.onmouseover = function changeColor() {
document.getElementById('btn').style.color = "#ff1033";
}
btn.onmouseleave = function changeColor() {
document.getElementById('btn').style.color = "#fff";
}
Or using CSS it's much easier:
#btn {
color: #ff1033;
}
#btn:hover {
color: #fff;
}
Using onmouseover or css is much easier, but if you still want to do it with add Event listener, you must think that add will attach the function and remove will remove it from the element.
In any case are two separated events that you must add.
Example:
var element=document.getElementById('btn');
var changeColorA = function () {
document.getElementById('btn').style.color = "#ff1033";
}
var changeColorB = function () {
document.getElementById('btn').style.color = "#000";
}
element.addEventListener('mouseover', changeColorA);
element.addEventListener('mouseout', changeColorB);
Again, I DO NOT RECOMMEND YOU USE THIS CODE, IS FOR EDUCATIONAL POURPOSES ONLY.
Do it with CSS
