DIV+CSS は、地域のマウス イベントの動的効果を実装します_html/css_WEB-ITnose

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

支持 IE 和 Firefox

 程序代码

 

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

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

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

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

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


   再试一下双击这里，看看会怎么样？
  
   HTML代码为:

  

   

文字内容

  

CSS代码:

.Content{ color:#C6005C; border:1px ソリッド #FFB6DA;
border-left:8px ソリッド #FFB6DA;
背景:#FFEAF5;
padding:10px;
}

.ContentHover
{
border:1pxソリッド #E50072;
border-left:8pxソリッド#E50072;
background:#FF249 1;
padding:10px;
color:#FFFFFF;
}

.ContentDown
{
border:1pxソリッド#C6005C;
border-left:8pxソリッド#C6005C;
背景:#DD0056 ;
padding:10px;
color:#FFFFFF;
}

作成者: Huacn.Lee