mouseover and mouseout events html-CodePudding

how do I make button that when mouse over the button, the text on the button becomes red. When the mouse left the button, the button text resumes the original color using mouseover and mouseout events.

here is the event for the button

< button id="Button" onclick="test()" > enter

CodePudding user response：

This could easily be done with css however per your question here is how you would accomplish this:

<button id="button" onm ouseover="mouseOver()" onm ouseout="mouseOut()" onclick="test()" >Enter</button>

<script>
function mouseOver() {
  document.getElementById("button").style.color = "red";
}

function mouseOut() {
  document.getElementById("button").style.color = "black";
}
</script>