先贴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. Android 光线传感器的调用
			
    1.activity如果要使用传感器,就必须实现SensorEventListener接口 2.得到传感器管理对象(sensormanager) 3.使用sensormanager.registerl ...
    
			
    2. 
						
  2. 十三. JEB破解三
			
    一.启动环境 JEB 2.0Demo版本启动后出现这样一个界面 当前环境算出的许可证数据 48000000BDEAE192E4CEFC82B34C2AC67F3A85DF5C0E262E421772C ...
    
			
    3. 
						
  3. Apache curator-client详解
			
    Apache curator框架中curator-client组件可以作为zookeeper client来使用,它提供了zk实例创建/重连机制等,简单便捷.不过直接使用curator-client并 ...
    
			
    4. 
						
  4. java24
			
    1:多线程(理解)    (1)JDK5以后的针对线程的锁定操作和释放操作        Lock锁    (2)死锁问题的描述和代码体现    (3)生产者和消费者多线程体现(线程间通信问题)    ...
    
			
    5. 
						
  5. Path之Data属性语法A命令
			
    <Path Width="300" Height="300" Fill="Red" Data="M 100,100 L 10 ...
    
			
    6. 
						
  6. int main( int argc, char **argv)
			
    1.参数 (有时参数是void) argc是程序运行时参数个数 argv是存储参数的数组,可以用char* argv[],也可以用char **argv. 例如编译一个hello.c的程序 1 #in ...
    
			
    7. 
						
  7. Centos7 安装配置Mysql
			
    Centos7默认自带的mariadb数据库,它是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能轻松成为MySQL ...
    
			
    8. 
						
  8. socket通信之eofexception
			
    方案一: 用read()将不会抛出异常.因为read是block方式的. readInt()抛出异常的原因(我遇到的)是对方在该端口没有消息发送. 方案二: socket的端口被阻塞了 ,也就是我们需 ...
    
			
    9. 
						
  9. [MongoDB]安装MongoDB
			
    汇总: 1. [MongoDB]安装MongoDB2. [MongoDB]Mongo基本使用:3. [MongoDB]MongoDB的优缺点及与关系型数据库的比较4. [MongoDB]MongoDB ...
    
			
    10. 
						
  10. Asp.net通过模板(.dot/Html)导出Word，同时导出图片
			
    一.Office组件导出Word(服务器配置麻烦) 需要引用Office的DLL,在下文的附件中,不同的Offic版本用的不一样,虽然高级版本可以兼容低级的,不过,还是统一版本最好 贴上核心代码(转载 ...
    
			
    11.