<!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 class="Content" 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 class="ContentCode">
<div class="Content" 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 class="ContentCode">
.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 class="ContentInfo">
<a href="#http://www.nocstudio.com/blog">Author: Huacn.Lee</a>
</div>
</div>
<body>
</body>
</html>
