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>
时间: 2024-08-25 00:51:35

getElementById 鼠标经过字体改变颜色的相关文章

使用case语句给字体改变颜色

使用case语句给字体改变颜色 #!/bin/bash color(){ RED_COLOR='\E[1;31m' GREEN_COLOR='\E[1;32m' YELLOW_COLOR='\E[1;33m' BLUE_COLOR='\E[1;34m' PINK_COLOR='\E[1;35m' RES='\E[0m' if [ $# -ne 2 ];then echo "Usage $0 content {red|yellow|blue|green}" exit fi case &q

【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果

:hover所有主流浏览器都支持(IE6.0以下支持不好,以后再学习用Javascript来实现悬停效果) 这是一个绿色底白色Icon的搜索按钮 CSS部分: #top_search { background-color: #24890D; border: 16px solid #24890D; width: 16px; height: 16px; float: right; } HTML部分: <div id="top_search"> <img src="

下拉列表,鼠标移动上去改变颜色

<style> .test li{display:block;text-align:center;height:30px;}.test li:visited{color:#666;text-decoration:underline;}.test li:hover{color:#FFF; font-weight:bold;text-decoration:none; background-color:#06C;}</style> <body><div class=&q

jquery鼠标经过字体发生变化-图片发生变化//为注释内容

<!doctype html> <html> <head> <meta charset="gb2312"> <title>部长练习jquery的属性</title> <script src="js/jquery-1.11.1.min.js"></script> <style> .bor{border:10px solid yellow;} .red{color

鼠标在字体上移动,字体颜色渐变

这里的传参方法跟本博客中javascript"鼠标移入移出背景色渐变"中的传参方式相同,我贴的代码是全部都有的,大家可以复制过去直接看效果,有更好的建议的望留言…… <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标在字体上移入移出字体颜色渐变</title> <style&g

WinForm开发中针对TreeView控件改变当前选择节点的字体与颜色

本文转载:http://www.cnblogs.com/umplatform/archive/2012/08/29/2660240.html 在B/S开发中,对TreeView控件要改变当前选中节点的颜色比较方便,其有相应的SelectedNodeChanged事件进行控制,但对于WinForm则没有这样方便.申明一下,我在这儿所说的改变当前节点的字体与颜色,主要是在WinForm中的TreeView控件,当前选中节点后,其失去鼠标焦点后节点的字体与颜色失去了选中状态,层级一多,我们就不知道当前

Android(java)学习笔记96:如何改变spinner系统自带的字体和颜色

1.首先我们要知道spinner系统自带字体和颜色本质: 原生的Spring 控件是无法更改字体和颜色的... 从下面的代码可以看出...红色的标注显示使用的是Android默认的布局.. 1 Spinner s1 = (Spinner) findViewById(R.id.spinner1); 2 ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource( 3 this, R.array.colors, andr

Lable 控件 -- 用代码改变要显示字体的颜色

lable控件怎么改变显示字体的颜色 代码如下: 1 string color = "#B72C34"; 2 3 this.lbl.ForeColor = System.Drawing.ColorTranslator.FromHtml(color); *解说: 1. 字符串 color 是想要字体显示的颜色,在任意取色器中取色,复制粘贴过来即可. 2. lbl 为自己的lable控件所取的名称,可任意更改名称,但要跟前台界面中的 lable 控件的名称一致.

Android textview 同时改变字符串中部分字体的颜色与大小

Android TextView 改变字体主要有两种方法: 1.Html.fromHtml 获取一个用html格式表示的Spanned. 2.另一种方式是直接构造使用一个Spanned. 若要同时改变字符串中部分字体的颜色与大小,采用第一种方式 html.fromHtml,用font标签来实现时,不幸的是Android中对font的属性只支持color与face,但不支持size.那么完全使用font标签的html,是实现不了了. 使用html改变字体大小的,可以尝试<small>或<h