先贴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. CFileDialog(文件夹对话框类)和CFontDialog(字体设置对话框类)的使用学习
			
    CFileDialog(文件夹对话框类) 主要用于文件的保存,另存,打开,关闭等功能 功能“另存为”的实现: void CTXTDlg::OnFileSaveas() { LPCTSTR szFilt ...
    
			
    2. 
						
  2. 【安装Express】CentOS7 下安装NodeJs+Express+MongoDB+Redis
			
    上一篇介绍了一下怎么安装Nodejs,那么这一篇就说说怎么安装express,express有个中文站点非常非常方便,http://www.expressjs.com.cn/创建express框架的站 ...
    
			
    3. 
						
  3. js实现四舍六入 奇进偶舍
			
    function PointFloat(src, pos) { return Math.round(src * Math.pow(10, pos)) / Math.pow(10, pos); } // ...
    
			
    4. 
						
  4. poj1182食物链_并查集_挑战程序设计竞赛例题
			
    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 65534   Accepted: 19321 Description ...
    
			
    5. 
						
  5. QTableWidget去除选中虚边框
			
    m_tableWidget->setFocusPolicy(Qt::NoFocus); //去除选中虚线框
    
			
    6. 
						
  6. Revolving Digits（hdu 4333）
			
    题意:就是给你一个数字,然后把最后一个数字放到最前面去,经过几次变换后又回到原数字,问在这些数字中,比原数字小的,相等的,大的分别有多少个.比如341-->134-->413-->3 ...
    
			
    7. 
						
  7. AgileEAS.NET SOA 中间件平台.Net Socket通信框架-完整应用例子-在线聊天室系统-下载配置
			
    一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍 在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架介绍一文之中我们对AgileEAS.NET SOA ...
    
			
    8. 
						
  8. module_init的加载和释放
			
    转自:http://blog.csdn.net/dysh1985/article/details/7597105 像你写C程序需要包含C库的头文件那样,Linux内核编程也需要包含Kernel头文件, ...
    
			
    9. 
						
  9. HTML5离线Web应用实战：五步创建成功
			
    [IT168 技术]HTML5近十年来发展得如火如荼,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化.HTML功能越来越丰富,支持图片上传拖拽.支持localstorage. ...
    
			
    10. 
						
  10. BestCoder 2nd Anniversary
			
    A题 Oracle http://bestcoder.hdu.edu.cn/contests/contest_chineseproblem.php?cid=703&pid=1001 大数相加: ...
    
			
    11.