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 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...
随机推荐
- 洛谷 P1683 入门
P1683 入门 题目描述 不是任何人都可以进入桃花岛的,黄药师最讨厌象郭靖一样呆头呆脑的人.所以,他在桃花岛的唯一入口处修了一条小路,这条小路全部用正方形瓷砖铺设而成.有的瓷砖可以踩,我们认为是安全 ...
- hdu4565---So Easy!(矩阵)
Problem Description A sequence Sn is defined as: Where a, b, n, m are positive integers.┌x┐is the ce ...
- worldpress 的 GPG 加密插件
worldpress 的 GPG 加密插件资料来源 https://trog.qgl.org/wpgpg/这个插件的作用是,用GPG 加密worldpress 的输出内容,然后在chrome浏览器中上 ...
- android 图片特效处理之光照效果
这篇将讲到图片特效处理的光照效果.跟前面一样是对像素点进行处理,算法是通用的. 算法原理:图片上面的像素点按照给定圆心,按照圆半径的变化,像素点的RGB值分别加上相应的值作为当前点的RGB值. 例: ...
- 73,QT指针数组实战(指针数组与数组指针)
//指针数组,每一个指针都是一个MainWindow // MainWindow *w[3][4]; // for(int i=0;i<3;i++) // { // for(int j=0;j& ...
- Glide二次封装库的使用
更多代码可以查询本人GitHub:欢迎阅读,star点起来. Glide二次封装库源码 前言 为什么选择Glide? Glide 轻量级 速度快 可以根据所需加载图片的大小自动适配所需分辨率的图 支持 ...
- 【习题 8-4 UVA - 11491】Erasing and Winning
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑删掉第i位. 则第i+1位就会取代第i位. 则肯定第i+1位比第i位大的话,才比较好. 则从小到大贪心删,找到第一个a[i+1] ...
- Android网络通信Volley框架源代码浅析（一）
尊重原创http://blog.csdn.net/yuanzeyao/article/details/25837897 从今天開始,我打算为大家呈现关于Volley框架的源代码分析的文章,Volley ...
- eclipse - 下载网址
这里面有着非常齐全的eclipse相关资源,而且都是放在网盘里面的,下载也方便 http://www.androiddevtools.cn/
- git 工具的使用总结（6）-提交合并处理
1.撤消修改 1)revert:反转提交,它就是把你的一个提交先撤消掉,但是,它跟reset不同的是,你的这次这小会留下记录,这样在你下次需要的时候,可以通过这个节点把撤消的提交恢复 zhangshu ...