DIV+CSS实现区域鼠标事件的动态效果

转载 2012年08月14日 13:55:03

现在WEB2.0时代来了,你可以在很多网站上看到一种鼠标移动上去表格会有状态的效果,今天偶就给大家讲一下具体的做法,可能我这个方法不太好,还请大家多多指点。
其实方法就是在DIV里面加入了 OnMouseOver(鼠标移动到上面) OnMouseOut(鼠标移开) OnMouseDown(鼠标按下) OnMouseUp(鼠标放开) 在这种事件时,改变DIV的Class对应的 CSS 样式。这样就实现了动态效果。

支持 IE 和 Firefox

程序代码
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS 实现区域动态效果</title>
<style>

/*=DIV+CSS实现区域响应鼠标事件=*/
/*=======Author:Huacn.Lee======*/
/*= http://www.nocstudio.com =*/
body
{
font:Arial,宋体;
font-size:12px;
padding:30px;
text-align:center;
}

/*外表格*/
#DivTable
{
width:80%;
height:480px;
text-align:left;
cursor:pointer;
}

/*普通样式*/
.Content
{
color:#C6005C;
border:1px solid #FFB6DA;
border-left:8px solid #FFB6DA;
background:#FFEAF5;
padding:10px;
}

/*鼠标到上面时效果*/
.ContentHover
{
border:1px solid #E50072;
border-left:8px solid #E50072;
background:#FF2491;
padding:10px;
color:#FFFFFF;
}

/*鼠标按下时*/
.ContentDown
{
border:1px solid #C6005C;
border-left:8px solid #C6005C;
background:#DD0056;
padding:10px;
color:#FFFFFF;
}

.ContentInfo
{
background:#FFFFFF;
text-align:right;
margin:0px;
}

a:link,a:visited
{
text-decoration:none;
display:block;
padding:5px;
border-bottom:1px dashed #C6005C;
color:#CC0000;
}

a:hover
{
color:#FFFFFF;
background:#FF2467;
padding:5px;
border-bottom:1px dashed #C6005C;

}

.ContentCode
{
background:#FFFFFF;
border:1px dashed #333333;
color:#333333;
padding:5px;
margin:0px;
height:100px;
overflow:scroll ;
}

</style>
</head>
<div id="DivTable">
<div onmouseover="this.className='ContentHover'" onmouseout="this.className='Content'" onmousedown="this.className='ContentDown'" onmouseup="this.className='ContentHover'" ondblclick="location='http://www.nocstudio.com/blog'">
   Web2.0网站中常见的一种效果:<br />
   通过DIV+CSS实现 一块没有连接的区域实现鼠标事件的动态效果。<br /><br />

   试着把你的鼠标移动到这上面来看看效果,再把鼠标移开。<br />
   再试一下用鼠标点击这里,再放开,试一下效果怎样。<br />
   呵呵,不错吧..........<br /><br />
   再试一下双击这里,看看会怎么样?
  
   HTML代码为:<br />
   <div <div onmouseover="this.className='ContentHover'" onmouseout="this.className='Content'" onmousedown="this.className='ContentDown'" onmouseup="this.className='ContentHover'" ondblclick="location='http://www.nocstudio.com/blog'"> 文字内容 </div>

   </div>
   <br />
   CSS代码为:<br />
   <div .Content{ color:#C6005C; border:1px solid #FFB6DA;
     border-left:8px solid #FFB6DA;
     background:#FFEAF5;
     padding:10px;
     }</p>
    <p>.ContentHover
     {
     border:1px solid #E50072;
     border-left:8px solid #E50072;
     background:#FF2491;
     padding:10px;
     color:#FFFFFF;
     }</p>
    <p>.ContentDown
     {
     border:1px solid #C6005C;
     border-left:8px solid #C6005C;
     background:#DD0056;
     padding:10px;
     color:#FFFFFF;
     }</p>

   </div>
</div>
<div <a href="http://www.nocstudio.com/blog">Author: Huacn.Lee</a>
</div>
</div>
<body>
</body>
</html>

鼠标拖动div(pc/移动)/touch事件/mouse事件

这周接了一个分享到QQ后者微信的分享页任务,里面有一个拖动div左右滑动的功能,由于第一次做,弄了五六个小时,终于出来了1.csstransition-duration: 0ms; 规定完成过渡效果需...
  • u010018421
  • u010018421
  • 2016年12月16日 23:20
  • 4842

鼠 标 事 件 特 效

  • 2008年12月26日 09:53
  • 1.1MB
  • 下载

css取消div蹭上的鼠标点击事件

.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: ...
  • ximenxiafeng
  • ximenxiafeng
  • 2015年09月16日 20:09
  • 859

CSS 点击事件on 和onclick有什么区别? // CSS关于文本的那几个实用的属性

2.CSS文本 2.1 white-space: pre-line; 强制文字进行换行,前提是在文本中要先在文字中加” \n “,这样css识别出来在此处进行强制换行。word-wrap:normal...
  • qq_33072593
  • qq_33072593
  • 2017年07月03日 22:51
  • 418

用CSS实现鼠标单击特效

  • zgqtxwd
  • zgqtxwd
  • 2008年05月01日 00:39
  • 284

css的hover事件 鼠标滑过让该元素的子元素或者其他元素演示该表

无标题文档 .hoverfa>a{ text-decoration:none; color:#000;} .hoverfa:hover{ border-bottom:#6CF 1px solid; ...
  • rui512777
  • rui512777
  • 2016年08月31日 08:29
  • 4988

css 鼠标悬停事件

1、一般先定义先后在定义悬停和动作,否则有时渲染不出来的 2、 一般访问前和访问后的样式保持一致,active访问瞬间有时不需要...
  • kpchen_0508
  • kpchen_0508
  • 2014年12月11日 09:13
  • 1897

CSS 鼠标响应事件,鼠标经过CSS,鼠标移动CSS,鼠标点击CSS

几种鼠标触发CSS事件。   说明: onMouseDown 按下鼠标时触发  onMouseOver 鼠标经过时触发  onMouseUp 按下鼠标松开鼠标时触发  onMouseOut 鼠标...
  • lifan_3a
  • lifan_3a
  • 2013年09月04日 11:37
  • 3560

div的鼠标点击事件

http://www.w3.org/1999/xhtml">     checkbox  radio       div     {         height:10px...
  • kakaka2011
  • kakaka2011
  • 2013年01月03日 19:06
  • 5477

图片选中效果 css

一、图片选中效果图: 二、CSS .pic_box{ width:900px;} .pic_box li{ width:204px; height:154px;list-style-type...
  • jxq0816
  • jxq0816
  • 2015年10月29日 18:09
  • 5111
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV+CSS实现区域鼠标事件的动态效果
举报原因:
原因补充:

(最多只允许输入30个字)