思路：

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. SpringMVC框架的多表查询和增删查改

    必须声明本文章==>http://www.cnblogs.com/zhu520/p/7883268.html 一: 1):我的运行环境 我使用myeclipse(你也可以使用eclipse),t ...

  2. SpringBoot 增加 拦截器 判断是否登录

    1.创建拦截器 package com.example.demo.interceptor; import org.slf4j.Logger; import org.slf4j.LoggerFactor ...

  3. 【Henu ACM Round#14 B】Duff in Love

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 让你在n的因子里面找一个最大的数字x 且x的因子全都不是完全平方数(y^2,y>1) O(sqrt(n))找出n的所有因子. ...

  4. CSUOJ 1541 There is No Alternative

    There is No Alternative Time Limit: 3000ms Memory Limit: 262144KB This problem will be judged on Aiz ...

  5. jvm vmthread

    http://www.360doc.com/content/15/0615/16/15758456_478311946.shtml http://www.51testing.com/html/95/1 ...

  6. 自编Photoshop简单教程

    由于本科时对图形图像比較感兴趣所以Ps和Ai玩的还算能够.所以无论本科时候还是研究生阶段总是有非常多人让我帮忙处理一些图片.记得工作那一年參与一个大项目时还帮了CRI里员工处理了一些图片项目中也处理了 ...

  7. 出乎意料的else语句

    在python中你可能时不时不碰到else语句用在while和for循环中,请不要吃惊,先看看它的作用吧! 实际上在循环语句中,else子句仅仅会在循环完毕后运行.即跳出循环的操作.如break,同一 ...

  8. jQuery源码05 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理

    //对外接口 jQuery.extend({ queue: function( elem, type, data ) {//入队.元素.队列名字.存进去的函数 //jQuery.queue( this ...

  9. hq-源码编译

    这里编译整个项目的基本格式是 ./mk + 平台名 +项目名_客户名 +mmm +new 例如 ./mk hq6735_65c_b1k_l1 al811_doov mmm new 编译单个模块 ./m ...

  10. PDF Adobe Acrobat 9 简体中文专业版（打印店内部的软件）（你懂的！）

    福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑         Java全栈大联盟   ...