[英]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. mouseon Function 将文本更改为绿色,其 position。我还需要它来更改字体和大小。 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 以使文本恢复正常。
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您很可能只需要使用
fontSize
和fontFamilly
来完成这项工作
function mouseOn() {
...
document.getElementById("text").fontSize = "22px";
document.getElementById("text").fontFamilly = "Font Familly";
}
and then revert it on mouseOff
:然后在
mouseOff
上还原它:
function mouseOff() {
...
document.getElementById("text").fontSize = "initial font size";
document.getElementById("text").fontFamilly = "initial familly size";
}
In your css, you can write在你的css中,你可以这样写
#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 (eg position: relative
), otherwise positioning on #text
won't work.不要忘记确保您已经定位了
#text
的父级(例如position: relative
),否则在#text
上定位将不起作用。
/* text's-parent { position: relative } */
/* #text.changed { ...the styles you need } */
Then, in js然后,在js
function mouseOn() {
document.getElementById("text").classList.add('.changed');
}
function mouseOff() {
document.getElementById("text").classList.remove('.changed');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.