先贴javascript经典例子代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

     <title>Document</title>

     <style type="text/css">

         div{width: 200px;height: 200px; background: red; margin-bottom: 10px;}

         #box2{display: none}

     </style>

     <script type="text/javascript">

         function jin(){

             document.getElementById("box1").style.backgroundColor = "blue";

             document.getElementById("box2").style.display = "block";

         }

         function chu(){

             document.getElementById("box1").style.backgroundColor = "red";

             document.getElementById("box2").style.display = "none";

         }

     </script>

 </head>

 <body>

     <div id="box1" onmouseover="jin()" onmouseout="chu()"></div>

     <div id="box2"></div>

 </body>

 </html>

鼠标移动前效果：

鼠标移动后效果：

代码注释解析：

css中

. 是类，可应用于任何标签，如:class="style1"
#是伪类，只可用于某一个标签，如:id="header"
一般都是用display:none和display:block来控制层的显示，上面代码用
display:none和display:block使box2是否设置为块级元素。

display:block;
是让对象成为块级元素(比如a，span等)

可参考：CSS display 属性
												


											
经典的javascript函数实例，css的. #区别的更多相关文章
	

    
								
  1. JavaScript函数 bind call apply区别
		
    1. apply calll 在JavaScript中 call 和 apply 都是为了改变某个函数运行时上下文而存在的, 换句话说就是为了改变函数内部的this的指向. 这里我们有一个新的对象 b ...
    
		
    2. 
						
  2. web前端面试第一次[javascript函数和方法的区别]
		
    //函数 function f1(){ console.log("我是函数"); } //调用函数 f1(); //创建一个空对象 var obj = {} //把函数定义到对象里 ...
    
		
    3. 
						
  3. JavaScript 函数声明，函数表达式，匿名函数，立即执行函数之区别
		
    函数声明:function fnName () {-};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = function () {-};使 ...
    
		
    4. 
						
  4. 详解Javascript 函数声明和函数表达式的区别
		
    Javascript Function无处不在,而且功能强大!通过Javascript函数可以让JS具有面向对象的一些特征,实现封装.继承等,也可以让代码得到复用.但事物都有两面性,Javascrip ...
    
		
    5. 
						
  5. FF与IE对JavaScript和CSS的区别
		
    一.FF与IE对JavaScript的区别 1. document.formName.item("itemName") 问题 说明:IE下,可以使用document.formNam ...
    
		
    6. 
						
  6. JavaScript 函数与对象的 简单区别
		
    直接上例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...
    
		
    7. 
						
  7. sqlserver自定义函数与存储过程的区别 实例详解
		
    分享下sql server自定义函数与存储过程的区别,一起来学习下. 一.自定义函数: 1. 可以返回表变量 2. 限制颇多,包括 不能使用output参数: 不能用临时表: 函数内部的操作不能影响到 ...
    
		
    8. 
						
  8. JavaScript中的bind,call和apply函数的用法和区别
		
    一直没怎么使用过JavaScript中的bind,call和apply, 今天看到一篇比较好的文章,觉得讲的比较透彻,所以记录和总结如下 首先要理解的第一个概念,JavaScript中函数调用的方式, ...
    
		
    9. 
						
  9. TypeScript 中函数的理解？与 JavaScript 函数的区别？
		
    一.是什么 函数是JavaScript 应用程序的基础,帮助我们实现抽象层.模拟类.信息隐藏和模块 在TypeScript 里,虽然已经支持类.命名空间和模块,但函数仍然是主要定义行为的方式,Type ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
			
    在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
    
			
    2. 
						
  2. linux mingling
			
    grep 文本搜索工具 -i 忽略大小写 -v 不显示匹配行 -c 显示符合条件的行数值 文本搜索支持正则表达式 1 2 3 cat /etc/passwd | grep root // 显示包含ro ...
    
			
    3. 
						
  3. python , angular js 学习记录【2】
			
    1.不同scope之间的通信 (1)无父子关系的scope通信: 在需要操作的scope里面定义一个事件,名称为delete_host,参数为data $rootScope.$on('delete_h ...
    
			
    4. 
						
  4. 2016年11月28日--ADO.Net  查、插、删、改  小练习
			
    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
    
			
    5. 
						
  5. Servlet 之 ServletContext
			
    package cn.jiemoxiaodi.servlet_servletcontext; import java.io.IOException; import java.io.PrintWrite ...
    
			
    6. 
						
  6. currentColor-CSS3非常有用的变量
			
    一.currentColor-简介 currentColor顾名思意就是“当前颜色”,准确讲应该是“当前的文字颜色”,例如: .xxx { border: 1px solid currentColor ...
    
			
    7. 
						
  7. 最小生成树的Kruskal算法实现
			
    最近在复习数据结构,所以想起了之前做的一个最小生成树算法.用Kruskal算法实现的,结合堆排序可以复习回顾数据结构.现在写出来与大家分享. 最小生成树算法思想:书上说的是在一给定的无向图G = (V ...
    
			
    8. 
						
  8. 不用写Windows服务实现定时器功能（FluentScheduler ）
			
    MacBook Pro 只有四个 USB Type-C 接口是否错了? 一项新技术的诞生总会对已存在的事物造成冲击或影响,如果大家都害怕冲击与影响,那这个世界永远像现在不变就行了,大家都好好的,待在自 ...
    
			
    9. 
						
  9. 电脑莫名其妙的被装上了流氓软件DNSunlocker的解决办法
			
    重大更新:之前说的这些方法只能删除流氓文件,不能解决其弹出机具诱惑性的广告,网络经常不好用 经过测试,使用Malwarebytes Anti-Malware可以彻底解决这个问题,还能发现更多隐藏在你电 ...
    
			
    10. 
						
  10. 转债---Pregel: A System for Large-Scale Graph Processing(译)
			
    转载:http://duanple.blog.163.com/blog/static/70971767201281610126277/   作者:Grzegorz Malewicz, Matthew  ...
    
			
    11.