DIV+CSS实现区域鼠标事件的动态效果_html/css_WEB-ITnose

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

支持 IE 和 Firefox

程序代码




DIV+CSS 实现区域动态效果

/*=DIV+CSS实现区域响应鼠标事件=*/
/*=======Author:Huacn.Lee======*/
/*= http://HdhCmsTestnocstudio测试数据 =*/
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 ;
}

Web2.0网站中常见的一种效果:

通过DIV+CSS实现 一块没有连接的区域实现鼠标事件的动态效果。

试着把你的鼠标移动到这上面来看看效果，再把鼠标移开。

再试一下用鼠标点击这里，再放开，试一下效果怎样。

呵呵，不错吧..........


再试一下双击这里，看看会怎么样？

HTML代码为:

文字内容

查看更多关于DIV+CSS实现区域鼠标事件的动态效果_html/css_WEB-ITnose的详细内容...