先贴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. Maven No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK? 问题
			
    maven编译项目时出错,提示信息如下: [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3 ...
    
			
    2. 
						
  2. 无法识别的属性“targetFramework
			
    出现这个错误的原因是NET Framework 版本版本号不对应,iis和网站使用的一致版本就可以了.
    
			
    3. 
						
  3. ASP.NET基础代码备忘
			
    使用ASP.NET原生的__doPostBack方法触发asp:Button //javaScript部分 __doPostBack('<%=btnAmountDivided.UniqueID  ...
    
			
    4. 
						
  4. CentOS7下安装和使用Xdebug
			
    wget http://xdebug.org/files/xdebug-2.4.0rc4.tgztar xvzf xdebug-2.4.0rc4.tgzcd xdebug-2.4.0RC4phpize ...
    
			
    5. 
						
  5. angularjs里对JS的lowercase和uppercase的完善
			
    读angularjs的源码开头. var lowercase = function (string) { return isString(string) ? string.toLowerCase()  ...
    
			
    6. 
						
  6. SQL优化
			
    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...
    
			
    7. 
						
  7. Assertion failure in -[UITableView _configureCellForDisplay:forIndexPath:]
			
    今天遇到了Assertion failure in -[UITableView _configureCellForDisplay:forIndexPath:]这个错误,一直也没有百度,不料想却弄了一个 ...
    
			
    8. 
						
  8. 与你相遇好幸运，aglio写接口文档
			
    npm install -g aglio npm i aglio-theme-minimal aglio --theme-full-width -t minimal -i ./src/index.md ...
    
			
    9. 
						
  9. ASP.NET MVC与ASP.NET Web Form简单区别与适用场景
			
    概论: Asp.net  微软 提供web开发框架或者技术.分Web Form和ASP.NET MVC.下面简单说明各自优缺点及使用场景. Web Form 优点: 1.支持丰富的服务器控件.如:Gr ...
    
			
    10. 
						
  10. 如何在IntelliJ IDEA删除Project
			
    1.直接从菜单 File -> Close Project 关掉此项目,回到欢迎界面 2.在欢迎界面中,鼠标移到你想要删除的项目上(不要点击,一点就打开了),然后按DELETE键即可删除
    
			
    11.