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 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...
随机推荐
- PatentTips - Virtual translation lookaside buffer
BACKGROUND OF THE INVENTION A conventional virtual-machine monitor (VM monitor) typically runs on a ...
- js---10作用域链
<html> <head> <title>scope basic</title> </head> <body> <scri ...
- 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结
页面响应加载的顺序: 1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚 ...
- java接口理解（转载）
今天和同事好好的讨论了java接口的原理和作用,发现原来自己的对接口的理解仅仅是局限在概念的高度抽象上,觉得好像理解了但是不会变化应用其实和没有理解差不多.以前看一个帖子说学习一个东西不管什么时候都要 ...
- OpenCV —— 轮廓
把检测出的边缘像素组装成轮廓 —— cvFindContours OpenCV 使用内存存储器来统一管理各种动态对象的内存.内存存储器在底层被实现为一个有许多相同大小的内存块组成的双向链表 内存储 ...
- C/C++(指针数组)
指针数组 指针数组的本质是数组,数组指针的本质是指针 一个数组中的各个元素都是字符指针,即为字符指针数组,或者指针数组. int arr[] = {1,2,23,45,6};//整形数组 char c ...
- traceroute----追踪数据包在网络上的传输过程
traceroute命令 用于追踪数据包在网络上的传输时的全部路径,它默认发送的数据包大小是40字节. traceroute通过发送小的数据包到目的设备直到其返回,来测量其需要多长时间.一条路径上的每 ...
- kill&&pkill&&killall---删除执行中的程序
命令功能: 发送指定的信号到相应进程.不指定型号将发送SIGTERM(15)终止指定进程.如果无法终止该程序可用“-KILL” 参数,其发送的信号为SIGKILL(9) ,将强制结束进程 使用ps命令 ...
- POJ 2828 线段树单点更新 离线搞
Description Railway tickets were difficult to buy around the Lunar New Year in China, so we must get ...
- hdu 1384 Intervals (差分约束)
/* 给你 n 个区间 [Ai, Bi],要求从每一个区间中至少选出 Ci 个数出来组成一个序列 问:满足上面条件的序列的最短长度是多少? 则对于 不等式 f(b)-f(a)>=c,建立 一条 ...