先贴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. python Function
			
    Python 2.7.10 (default, Oct 14 2015, 16:09:02) [GCC 5.2.1 20151010] on linux2 Type "copyright&q ...
    
			
    2. 
						
  2. WCF service 获取 client 端的 IP 和 port （转）
			
    转帖记录一下,以便日后使用. 主要使用是.NET3.5里的服务端上下文的消息实例的RemoteEndpointMessageProperty属性,获取客户端地址信息.但是限制 的绑定是HTTP.TCP ...
    
			
    3. 
						
  3. python merry -- error handling in the real world
			
    参考: https://www.youtube.com/watch?v=8kTlzR4HhWo https://github.com/miguelgrinberg/merry 背景 本文实际就是把 d ...
    
			
    4. 
						
  4. nfs部署和优化
			
    nfs--网络文件系统 1.说明:允许一个系统在网络上与他人共享目录和文件 2.好处:通过nfs服务,就可以让这个机器访问远程的文件,像访问自己的文件一样,属于cs通信   3.原理说明:假设有A,B ...
    
			
    5. 
						
  5. Map java中的map 如何修改Map中的对应元素
			
    Map java中的map 如何修改Map中的对应元素 Map以按键/数值对的形式存储数据,和数组非常相似,在数组中存在的索引,它们本身也是对象.         Map的接口         Map ...
    
			
    6. 
						
  6. BubbleSort冒泡排序
			
    #include <stdio.h>void BubbleSort(int *a,int n);int main(void){ int arr[10] = {2,4,6,8,0,1,3,5 ...
    
			
    7. 
						
  7. Java中简单的操作（if语句、常用操作符、switch语句、变量赋值等）
			
    ---------------------if语句介绍--------------------------------------------------- class IfDemo { public ...
    
			
    8. 
						
  8. 浅析python 中__name__ = '__main__' 的作用
			
    引用http://www.jb51.net/article/51892.htm 很多新手刚开始学习python的时候经常会看到python 中__name__ = \'__main__\' 这样的代码 ...
    
			
    9. 
						
  9. Redis学习笔记(3) Redis基础类型及命令之二
			
    1. 集合类型 集合类型与列表类型有很多相似之处,但二者的区别在于:前者具有唯一性,但不具有有序性:后者具有有序性,但不具有唯一性.集合类型的常用操作是向集合中加入或删除元素.判断某个元素是否存在等, ...
    
			
    10. 
						
  10. 本机tomcat的server.xml被还原的问题及解决办法
			
    将tomcat的server.xml进行修改,但当eclipse发布站点后,发布tomcat中的server.xml会被还原. 原因是eclipse会将自己的tomcat配置文件对tomcat覆盖,解 ...
    
			
    11.