CODEWITHSUNDEEP
javascripthtml
Deke
Deke

Reputation: 4649

How to get onmouseover and onmouseout to work not as an inline function

How to get mouseOver and mouseout to work without calling them within the elements <div onmouseover="mouseOver()" >

document.getElementById('smallBox').addEventListener("onmouseover", function() {
  document.getElementById('smallBox').style.color = "blue;"
});



document.getElementById('smallBox').addEventListener("onmouseout", function() {
  document.getElementById('smallBox').style.color = "yellow;"
});
#smallBox {
  background-color: green;
  width: 100px;
  height: 100px;
}
<div id="smallBox">hi</div>

Upvotes: 0

Views: 413

Answers (2)

Aswin
Aswin

Reputation: 147

Add event handler for that element in JS under onload function. document.getElementById("smallbox").addEventListener("mouseover", myFunction)

U need to call this function when the DOM is loaded. document.getElementById("smallbox").addEventListener("load", functionName)

Nd for event reference, visit w3Schools

Upvotes: 0

Sebastian Speitel
Sebastian Speitel

Reputation: 7346

The names of the events are actually mouseover and mouseout. Another thing I had to change was the color attribute, which should just be "blue" instead of "blue;"

document.getElementById('smallBox').addEventListener("mouseover", function() {
  document.getElementById('smallBox').style.color = "blue";
});


document.getElementById('smallBox').addEventListener("mouseout", function() {
  document.getElementById('smallBox').style.color = "yellow";
});
#smallBox {
  background-color: green;
  width: 100px;
  height: 100px;
}
<div id="smallBox">hi</div>

Upvotes: 2

Related Questions