×

新导航介绍,点击查看

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

发表日期:2009-06-18 摄影器材: 点击数: 投票数:
现在WEB2.0时代来了,你可以在很多网站上看到一种鼠标移动上去表格会有状态的效果,今天偶就给大家讲一下具体的做法,可能我这个方法不太好,还请大家多多指点。
其实方法就是在DIV里面加入了 OnMouseOver(鼠标移动到上面) OnMouseOut(鼠标移开) OnMouseDown(鼠标按下) OnMouseUp(鼠标放开) 在这种事件时,改变DIV的Class对应的 CSS 样式。这样就实现了动态效果。
支持 IE 和 Firefox
程序代码




DIV+CSS 实现区域动态效果




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

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


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

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

呵呵,不错吧..........


再试一下双击这里,看看会怎么样?

HTML代码为:


文字内容




CSS代码为:


.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;
}








作者:sphil

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


下一篇:没有了

最 新:
没有其它新的作品了

更多sphil的POCO作品...

评论