读书人

透过DIV+CSS实现 一块没有连接的区域实

发布时间: 2012-08-24 10:00:20 作者: rapoo

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

?

<style>/*=DIV+CSS实现区域响应鼠标事件=*/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>

?

下面html 引用

<div onmouseover="this.className='ContentHover'"     onmouseout="this.className='Content'"     onmousedown="this.className='ContentDown'"     onmouseup="this.className='ContentHover'"     ondblclick="location='http://www.iteye.com/'"> 文字内容 </div>   </div>
?

?

读书人网 >CSS

热点推荐