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 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...
随机推荐
- ajax和axios请求本地json数据对比
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...
- Saltstack的API接口与调用方式
saltstack看起来是成为一个大规模自己主动化运维和云计算管理的一个框架,类似于SDK,并非像puppet仅仅成为一个工具.基于良好设计的API和清楚的思路,让salt的二次开发变得非常easy ...
- adb-端口被占用解决办法（win）
今天在window下使用adb的时候,提示我说5037端口被占用. * daemon not running. starting it now on port * ADB server didn't ...
- Excel 2013数据挖掘工具栏的介绍（二）
这里不多说,直接上干货! 上一篇博客是 下载安装与配置Excel 2013数据挖掘加载项(SQL Server 2012 SP1 + SQLServer2012_DMAddin.msi) Excel ...
- centos 6.7下安装rabbitmq 3.6.6过程
准备,请确保有root权限或者sudo权限,不然不用继续看下去了. 1.erland的安装 首先测试一下是否已经安装了erlang,命令 rpm -qa | grep erlang 若没有安装,则 y ...
- #学习笔记#——JavaScript 数组部分编程（六）
14. 题目描述 实现一个打点计时器,要求 1.从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 1 2.返回的对象中需 ...
- 调用C#版gdal库的一个注意事项
作者:朱金灿 来源:http://blog.csdn.net/clever101 在编译完C#版gdal库(x86平台)下,写了一个C#的控制台测试程序,出现下面的错误: 解决办法是将工程的目标平台设 ...
- go语言的一个gui 开源 项目 https://github.com/andlabs/ui
go语言的一个gui 开源 项目 https://github.com/andlabs/ui 1 安装 mingw-w64 链接地址: http://mingw-w64.sourceforge. ...
- grunt yoman bower的理解
grunt : 前端构建工具 1 什么事前端构建工具 目前前端已经开始了工程化 比如 一个项目 里面用到了几十个js文件 几十个css 很多图片资源 我们如果引入 还是按照以前的方式 out 因此这个 ...
- spark源码阅读
根据spark2.2的编译顺序来确定源码阅读顺序,只阅读核心的基本部分. 1.common目录 ①Tags②Sketch③Networking④Shuffle Streaming Service⑤Un ...