当您将鼠标悬停在文本上时，我应该更改文本颜色、大小和字体。我怎样才能让这种情况持续发生？

发布于 2025-01-10 10:58:42 字数 650 浏览 0 评论 0原文

mouseon 函数将文本更改为绿色及其位置。我还需要它来更改字体和大小。当鼠标悬停在文本上时，我需要这两个功能始终发生。我希望鼠标关闭功能使文本恢复正常。

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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怼怹恏 2025-01-17 10:58:42

您很可能只需要使用 fontSize 和 fontFamilly 来完成此操作

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

，然后在 mouseOff 上恢复它：

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

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

回复收藏 0 原文

背叛残局 2025-01-17 10:58:42

在你的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 */
}

不要忘记确保你已经定位了#text的父级（例如position:relative），否则定位在< code>#text 不起作用。

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

然后，在 js 中

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

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

回复收藏 0 原文

~没有更多了~