思路：

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样式改变的更多相关文章

  1. CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分

    问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding ...

  2. JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符

    练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1.  && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...

  3. JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载

    <style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...

  4. JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式

    练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...

  5. JS学习笔记 - fgm练习 - 输入数字求和 正则replace onkeyup事件

    <style> body{font-size: 12px;} .outer{ width: 500px; margin: 0 auto; } span{ color: #999; } in ...

  6. JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max

    <script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...

  7. JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i

    <script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oS ...

  8. JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式

    <script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; va ...

  9. JS学习笔记 - fgm练习 - 网页换肤

    总结: 1. 点击按钮,div内部变色,边框保持颜色不变. 实现原理:其实本来就把background 和 border 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...

随机推荐

  1. 【Codeforces Round #424 (Div. 2) C】Jury Marks

    [Link]:http://codeforces.com/contest/831/problem/C [Description] 有一个人参加一个比赛; 他一开始有一个初始分数x; 有k个评委要依次对 ...

  2. JS 中 this 与闭包的结合产生的问题

    代码片段一: var name = "The Window"; var object = { name : "My Object", getNameFunc : ...

  3. [易飞]一张领料单单身仓库&quot;飞了&quot;引起的思考

    [摘要]我司每月月初10号前財务要出报表.故10号前要做完毕本月结. PMC经理接到仓管员反馈. 物料-30408011003在账上怎么还有那么多?上次发料的时候已发完. 相应的领料单:5403-20 ...

  4. 知名游戏开发者称 C++ 是一种非常糟糕、可怕的语言（C++不是一门可怕的语言，可怕的是一群没有耐心的程序员来使用C++这门语言）

    抛出一个问题:C++ 真的很可怕吗? 2016 年底,C++ 之父 Bjarne Stroustrup 在一次采访中表示:”C++ 让编程专家很容易编写出复杂.高性能.低资源消耗的代码,但不足以成为广 ...

  5. 再谈怎样以最简单的方法将泛型为String类型的集合或String类型的数组转化为逗号间隔字符串形式

    今天review代码,看见某些大爷在将泛型为String类型的集合或String类型的数组转化为逗号间隔字符串形式时仍然仅仅顾结果不注重过程,"大爷"咱能负点责任吗? 将泛型为St ...

  6. ssh框架的总结

    一.spring:是基础,可以管理对象,也可以通过关键对象管理另一个框架.但是首先应该明确spring并不是只能应用于web方面,而是可以应用在一般的java项目中.只是如果在web环境下使用需要在w ...

  7. golang binarySearch

    func binarySearch(nodes []*node, word Text) (int, bool) { start := end := len(nodes) - // 特例: { // 当 ...

  8. tomcat日志配置之一自带log

    问题 tomcat每次启动时,自动在logs目录下生产以下日志文件,且每天都会生成对应日期的一个文件,造成日志文件众多: localhost.2012-07-05.txt catalina.2012- ...

  9. 洛谷——P2695 骑士的工作

    https://www.luogu.org/problem/show?pid=2695 题目背景 你作为一个村的村长,保卫村庄是理所当然的了.今天,村庄里来了一只恶龙,他有n个头,恶龙到处杀人放火.你 ...

  10. Android记录16-友盟第三方登录、分享实现

    Android开发记录16-友盟第三方登录.分享实现 2014年博客之星,投票地址username=wwj_748#content" style="font-family: Kai ...