Ferris教程学习笔记:js示例2.4 鼠标移入改变样式,鼠标移出恢复
2013-12-11 16:26
567 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>鼠标移入/移出改变样式</title> <style type="text/css"> body{color:#fff;font:12px/1.5 Tahoma;} #div1{width:150px;height:150px;margin:0 auto;padding:10px; background:black;border:10px solid #000;cursor:crosshair;} #div1.hover{color:red;background:#f0f0f0;border:10px solid red;} </style> </head> <body> <div class="" id="div1">鼠标移入改变样式,鼠标移出恢复</div> <script type="text/javascript"> window.onload = function(){ var div1 = document.getElementById("div1"); //绑定鼠标移入事件 div1.onmouseover = function(){ this.className = "hover"; } //绑定鼠标移出事件 div1.onmouseout = function(){ this.className = ""; } }; </script> </body> </html>
相关文章推荐
- Ferris教程学习笔记:js示例2.11 图片列表:鼠标移入/移出改变图片透明度
- Ferris教程学习笔记:js示例2.16 鼠标移过,改变图片路径
- Ferris教程学习笔记:js示例5.6 跟随鼠标移动(大图展示)
- Ferris教程学习笔记:js示例2.10 函数传参,改变Div任意属性的值
- Ferris这个教程学习笔记:js示例2.2:函数接收参数并弹出
- Ferris教程学习笔记:js示例3.1 用typeof查看数据类型
- 原生javascript学习:鼠标移入移出改变样式
- Ferris教程学习笔记:js示例2.13 简易JS年历
- Ferris教程学习笔记:js示例3.2 用parseInt解析数字,并求和
- Ferris教程学习笔记:js示例3.3 累加按钮,自加1
- Ferris教程学习笔记:js示例2.3 用循环将三个DIV变成红色
- Ferris教程学习笔记:js示例2.12 简易选项卡
- Ferris教程学习笔记:js示例3.4输入两个数字,比较大小
- Ferris这个教程学习笔记:js示例1:控制div属性
- Ferris教程学习笔记:js示例3.5 页面加载后累加,自加1
- Ferris这个教程学习笔记:js示例1.1:控制div属性
- Ferris教程学习笔记:js示例2.5 记住密码提示框
- Ferris教程学习笔记:js示例3.6 判断数字是否为两位数
- Ferris教程学习笔记:js示例5.7 自定义右键菜单,请在页面点击右键查看效果。
- Ferris这个教程学习笔记:js示例2.1:网页换肤