JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变
思路：
div的默认样式正常设置。
鼠标移入时，发生改变的样式有3个，即 边框颜色，div背景色，字体颜色。
把这三个css改变设置在一个类名下，再通过js给div动态 添加/去除这个类名，实现div样式改变。
<style>
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>
<script>
window.onload = function ()
{
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function ()
{
oDiv.className = "hover"
};
oDiv.onmouseout = function ()
{
oDiv.className = ""
}
};
</script>
</head>
<body>
<div id="div1">鼠标移入改变样式，鼠标移出恢复。</div>
</body>
JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变的更多相关文章
- CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分
问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding ...
- JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符
练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1. && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...
- JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载
<style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...
- JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式
练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...
- JS学习笔记 - fgm练习 - 输入数字求和 正则replace onkeyup事件
<style> body{font-size: 12px;} .outer{ width: 500px; margin: 0 auto; } span{ color: #999; } in ...
- JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max
<script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...
- JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i
<script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oS ...
- JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式
<script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; va ...
- JS学习笔记 - fgm练习 - 网页换肤
总结: 1. 点击按钮,div内部变色,边框保持颜色不变. 实现原理:其实本来就把background 和 border 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...
随机推荐
- CodeForcesGym 100502E Opening Ceremony
Opening Ceremony Time Limit: 5000ms Memory Limit: 524288KB This problem will be judged on CodeForces ...
- TCP的可靠性 窗口滑动 拥塞控制
看这篇文章: http://www.cnblogs.com/woaiyy/p/3554182.html 窗口滑动,如下图: 流量控制 流量控制方面主要有两个要点需要掌握.一是TCP利用滑动窗口实现流量 ...
- 高速排序——JAVA实现（图文并茂）
高快省的排序算法 有没有既不浪费空间又能够快一点的排序算法呢?那就是"高速排序"啦! 光听这个名字是不是就认为非常高端呢. 如果我们如今对"6 1 2 7 9 3 4 5 ...
- 高效的TCP数据拆包器
高效的TCP数据拆包器 接收器,每秒拆1KB的包达到30万以上 /// 数据同步协义数据接收器 /// </summary> /// <remarks> /// 主要功能有 / ...
- Razor小案例
Model using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace ...
- apicloud中的sqlite操作模块db
db 模块封装了手机常用数据库 sqlite 的增删改查语句,可实现数据的本地存储,极大的简化了数据持久化问题. 1.执行 var db = api.require('db'); db.execute ...
- 50.Node.js 连接 MySQL
转自:http://www.runoob.com/nodejs/nodejs-express-framework.html 安装驱动 本教程使用了淘宝定制的 cnpm 命令进行安装: $ cnpm i ...
- 图形界面备份Linux系统介绍
详情见: http://os.51cto.com/art/200905/125680.htm 虽然Linux 是一个高度可靠的操作系统,但对于现在复杂的internet环境下, ...
- vue2细节变化的用法
1.v-el和v-ref合并为一个属性:ref 原来:v-el:my-element 现在: ref="myElement", v-ref:my-component 变成了这样: ...
- Linux 关闭正在运行的程序---命令
Ctrl + C 终止 Ctrl + D 退出 Ctrl + S 挂起 Ctrl + Q 解挂 Ctrl + Z 强制结束