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 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...
随机推荐
- StdTranslator - Translate PDMS to STD for STAAD.Pro
StdTranslator - Translate PDMS to STD for STAAD.Pro eryar@163.com STAAD.Pro是由美国世界著名的工程咨询和CAD软件开发公司—R ...
- Markdown编辑器为什么好用以及好用的markdown编辑器
Markdown编辑器为什么好用以及好用的markdown编辑器 一.总结 一句话总结:Markdown 是一种简单的.轻量级的标记语法.用户可以使用诸如 * # 等简单的标记符号以最小的输入代价生成 ...
- js 判断是不是空、值是否存在
判断数组是否存在某个值: Array.indexOf(val) > -1 //存在 (缺陷:一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观.二 ...
- Linux-PS1变量详解
1.PS1 要修改linux终端命令行颜色,我们需要用到PS1,PS1是Linux终端用户的一个环境变量,用来说明命令行提示符的设置.在终端输入命令:#set,即可在输出中找到关于PS1的定义如下: ...
- readonly&&declare&&unset &&export&&env环境变量
readonly命令用于定义只读shell变量和shell函数.readonly命令的选项-p可以输出显示系统中所有定义的只读变量. 选项 -f:定义只读函数: -a:定义只读数组变量: -p:显示系 ...
- ST和LCA和无根树连接
#include <stdio.h> #include <iostream> #include <string.h> #include <algorithm& ...
- 【Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) D】Bash and a Tough Math Puzzle
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 对于1操作 令len = r-l+1 等价于查找l..r这个范围内x的倍数的个数是否大于等于len-1 也即l..r这个范围内不是x ...
- hdu4336Card Collector 概率dp+状态压缩
//给n个卡片每次出现的概率,求全部卡片都出现的须要抽的次数的期望 //dp[i]表示在状态的情况下到全部的卡片都出现的期望 //dp[i] = 1 + p1*dp[i] + ${p2[j]*dp[i ...
- 24.Node.js Stream(流)
转自:http://www.runoob.com/nodejs/nodejs-stream.html Stream 是一个抽象接口,Node 中有很多对象实现了这个接口.例如,对http 服务器发起请 ...
- Day5上午解题报告
预计分数:100+40+30=170 实际假分数:0+0+0=0 CE*3 实际真分数:60+50+0=110 老师没把我的程序放的文件夹里面,于是..... T1 https://www.luogu ...