i am supposed to change the text color, size, and font when you hover the mouse over the text. How can i made this happen continiuously?

Question

the mouseon Function changes the text to green, and its position. i also need it to change font and size. i need these two functions to happen all the time when the mouse is hovered over the text. i want the mouse off function to bring the text back to normal.

function mouseOn(){
    document.getElementById("text").style.color = "green";
    document.getElementById("text").style.position = "fixed";
    document.getElementById("text").style.left = "300px";       
}
        
function mouseOff(){
    document.getElementById("text").style.position = "auto";
    document.getElementById("text").style.color = "blue";               
}

<h1 id="text" onmouseover= "mouseOn()" onmouseout = "mouseOff()"> Move the cursor over the text to see it change </h1>

Answer 1

You most likely just need to use fontSize and fontFamilly to make this work

function mouseOn() {
 ...
 document.getElementById("text").fontSize = "22px";
 document.getElementById("text").fontFamilly = "Font Familly";
}

and then revert it on mouseOff:

function mouseOff() {
 ...
 document.getElementById("text").fontSize = "initial font size";
 document.getElementById("text").fontFamilly = "initial familly size";
}

Answer 2

In your css, you can write

#text {
  position: auto;
  color: blue;
}
#text.changed {
  position: fixed;
  left: 300px;
  color: green;
  font-size: 20px; /* here goes your font size */
  font-family: sans-serif; /* here goes your font family */
}

Don't forget to make sure you have positioned #text's parent (e.g. position: relative), otherwise positioning on #text won't work.

/* text's-parent { position: relative } */
/* #text.changed { ...the styles you need } */

Then, in js

function mouseOn() {
  document.getElementById("text").classList.add('.changed');
}
function mouseOff() {
  document.getElementById("text").classList.remove('.changed');
}