DIV+CSS实现区域⿏标事件的动态效果
现在WEB2.0时代来了，你可以在很多⽹站上看到⼀种⿏标移动上去表格会有状态的效果，今天偶就给⼤家讲⼀下具体的做法，可能我这个⽅法不太好，还请⼤家多多指点。
其实⽅法就是在DIV⾥⾯加⼊了 OnMouseOver(⿏标移动到上⾯) OnMouseOut(⿏标移开) OnMouseDown(⿏标按下) OnMouseUp(⿏标放开) 在这种事件时，改变DIV的Class对应的 CSS 样式。这样就实现了动态效果。
⽀持 IE 和 Firefox
/*外表格*/
#DivTable
css鼠标点击样式{
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 οnmοuseοver="this.className='ContentHover'" οnmοuseοut="this.className='Content'"
οnmοusedοwn="this.className='ContentDown'" οnmοuseup="this.className='ContentHover'"
οndblclick="location='studio/blog'">
Web2.0⽹站中常见的⼀种效果:<br />
通过DIV+CSS实现 ⼀块没有连接的区域实现⿏标事件的动态效果。<br /><br />
试着把你的⿏标移动到这上⾯来看看效果，再把⿏标移开。<br />
再试⼀下⽤⿏标点击这⾥，再放开，试⼀下效果怎样。<br />
呵呵，不错吧..........<br /><br />
再试⼀下双击这⾥，看看会怎么样？
HTML代码为:<br />
<div <div οnmοuseοver="this.className='ContentHover'" οnmοuseοut="this.className='Content'"οnmοusedοwn="this.className='ContentDown'" οnmοuseup="this.className='ContentHover'"
οndblclick="location='studio/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=" : Huacn.Lee</a>
</div>
</div>
<body>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。