getElementById 鼠标经过字体改变颜色

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了getElementById 鼠标经过字体改变颜色相关的知识,希望对你有一定的参考价值。

1、鼠标离开的状态  
2、鼠标经过 我爱学习 字体由“红色”改变为“黄绿色”,此时鼠标离开—框框
3、鼠标经过 框框 时“浅蓝色”变为“黄绿色”,此时鼠标离开—我爱学习





技术分享技术分享技术分享
代码编写如下;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>鼠标移入时,改变字体的背景色,移出时,还原默认的背景色</title>
<style>

.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}

</style>

<script>

function aixuexi(){

var woaixuexi=document.getElementById("woaixuexi");

woaixuexi.style.background="yellowgreen";

}

function xuexi(){

var xuexi=document.getElementById("woaixuexi");

xuexi.style.background="#abcdef";

}
function ziti(){

var ziti=document.getElementById("font");

ziti.style.color="yellowgreen";

}

function zi(){

var ziti=document.getElementById("font");

ziti.style.color="red";

}

</script>

</head>

<body>
<h1 id="font" onmouseover="ziti();" onmouseout="zi();" class="ziti">我爱学习</h1>

<div id="woaixuexi" onmouseover="aixuexi();" onmouseout="xuexi();" class="xuexi"></div>
</body>
</html>























































以上是关于getElementById 鼠标经过字体改变颜色的主要内容,如果未能解决你的问题,请参考以下文章

如何设置鼠标经过时,改变背景颜色?

DW中鼠标经过字体时字体的颜色逐渐变化,CSS怎么做

java图形界面 运行时如何在点击鼠标时 改变字体颜色或者大小

在CSS中如何实现鼠标移上去后,字体变颜色?

鼠标移动上去使字体变色,这代码怎么写

js设置字体颜色