la función mouseon cambia el texto a verde y su posición. También lo necesito para cambiar la fuente y el tamaño. Necesito que estas dos funciones sucedan todo el tiempo cuando se pasa el mouse sobre el texto. Quiero que la función de apagado del mouse devuelva el texto a la normalidad.
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>Lo más probable es que solo necesite usar fontSize y fontFamilly para que esto funcione
function mouseOn() { ... document.getElementById("text").fontSize = "22px"; document.getElementById("text").fontFamilly = "Font Familly"; } y luego revertirlo en mouseOff :
function mouseOff() { ... document.getElementById("text").fontSize = "initial font size"; document.getElementById("text").fontFamilly = "initial familly size"; }En tu css, puedes escribir
#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 */ } No olvides asegurarte de haber posicionado el padre de #text (p. ej., position: relative ), de lo contrario, el posicionamiento en #text no funcionará.
/* text's-parent { position: relative } */ /* #text.changed { ...the styles you need } */Entonces, en js
function mouseOn() { document.getElementById("text").classList.add('.changed'); } function mouseOff() { document.getElementById("text").classList.remove('.changed'); }