鼠标经过时改变DIV背景颜色的三种途径

开发 前端
使用DIV CSS技术进行网页布局时有很多比较悬的效果可以实现,这里就向大家介绍一下鼠标经过改变DIV背景颜色,主要描述三种方式,相信你一定会感兴趣。

这里向大家简单介绍一下如何让鼠标经过时改变DIV背景颜色,当鼠标经过的时候改变网页和层的DIV背景颜色,应该会有很多的方法,目前整理出来比较常用的三种方法,相信本文介绍一定会让你有所收获。

三种方法鼠标经过改变DIV背景颜色

当鼠标经过的时候改变网页和层的DIV背景颜色,应该会有很多的方法,目前整理出来的这三种方法是比较常用的,希望对你的学习有所帮助。

方法一

  1. #div:hover{background:#000000;}  
  2.  

解释:鼠标经过id为div的元素时DIV背景变色

IE6.0、Firefox2.0、Opera9.23都不行

方法二

  1. <divonmouseoverdivonmouseover="this.style.backgroundColor='#F4F9FD'" 
  2.  
  3. onmouseout="this.style.backgroundColor='#FFFFFF'"></div> 
  4.  

方法三:

  1. <style> 
  2. .d_over{background-color:#307172;}  
  3. .d_out{background-color:#EFEFEF;}  
  4. </style> 
  5.  
  6. <divclassdivclass="d_out"onmouseover="this.className='d_over'"  
  7. onmouseout="this.className='d_out'">DIV背景颜色</div> 
  8.  
  9.  

<a>的标签是可以,可是,这样子会导致其它带有<a>标签的也跟着变色。

一般<a>是用来定义链接的样式的,并不是定义某个区域的。现在常用的DIV+CSS的网页用,DIV就是表示区域的意思,还是喜欢用这种,当然用table的话,会有更简单的方法。

【编辑推荐】

  1. DIV背景透明样式使用
  2. JavaScript动态创建div属性和样式
  3. CSS中border和clear两大属性用法揭秘
  4. 实现DIV居中布局三种途径
  5. 解读DIV CSS网页布局中CSS无效十个原因

 

责任编辑:佚名 来源: lam5.cn
相关推荐

2010-09-10 08:54:52

DIV居中

2022-06-20 15:08:42

数据货币数字化转型数据

2010-09-26 13:04:06

JVM内存查看

2023-10-18 11:12:01

增强现实VR

2013-04-28 10:19:33

软件即服务SaaSSaaS应用

2022-05-20 16:14:37

人工智能AI建筑行业

2011-09-22 13:47:35

云计算数据管理PaaS

2011-06-21 15:27:01

SEO外链

2010-09-13 15:32:38

DIV背景

2010-08-30 09:15:15

DIV高度自适应

2018-04-08 09:31:57

大数据

2022-01-25 14:50:21

区块链医疗技术

2010-08-26 16:19:41

DIV圆角

2018-06-26 11:52:39

物联网电子商务IOT

2022-10-25 09:49:47

5G制造业

2019-03-10 16:21:05

大数据深度学习人工智能

2010-09-30 16:13:13

J2ME应用程序

2016-11-21 12:26:58

编程代码

2019-03-08 10:36:13

云计算公共云云服务

2013-09-04 11:16:12

物联网
点赞
收藏

51CTO技术栈公众号