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>
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";
}
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');
}