• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

264
Views
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?

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>
almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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";
}
almost 3 years ago · Juan Pablo Isaza Report

0

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');
}
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error