DIV+CSS實現區域滑鼠事件的動態效果

阿新 • • 發佈：2019-01-15

現在WEB2.0時代來了，你可以在很多網站上看到一種滑鼠移動上去表格會有狀態的效果，今天偶就給大家講一下具體的做法，可能我這個方法不太好，還請大家多多指點。
其實方法就是在DIV裡面加入了 OnMouseOver(滑鼠移動到上面) OnMouseOut(滑鼠移開) OnMouseDown(滑鼠按下) OnMouseUp(滑鼠放開) 在這種事件時，改變DIV的Class對應的 CSS 樣式。這樣就實現了動態效果。

支援 IE 和 Firefox

程式程式碼
<!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 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 <div 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 .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="http://www.nocstudio.com/blog">Author: Huacn.Lee</a>
</div>
</div>
<body>
</body>
</html>

DIV+CSS實現區域滑鼠事件的動態效果

DIV+CSS實現區域滑鼠事件的動態效果

DIV+CSS實現仿京東商城導航條效果

CSS實現的滑鼠經過按鈕的效果

小三角帶邊框帶陰影的div——css實現效果

DIV+CSS實現中間彈窗效果

純CSS實現影象滑鼠懸停效果

DIV+CSS實現兩邊固定寬度,中間自適應寬度

網站註冊界面(div+css實現)

網站購物車界面(div+css實現)

網站登錄界面(div+css實現)

網站首頁(div+css實現)

UWP：使用Behavior實現Button點擊動態效果

canvas 實現波浪線--水波動態效果

使用CSS實現一個簡單的幻燈片效果

HTML用DIV/CSS實現下拉列表

使用CSS實現按鈕點選波紋效果

div+CSS實現三角形

div + css 實現表格

用純CSS實現加載中動畫效果

DIV+CSS實現仿SELECT下拉框程式碼（JQUERY）

DIV+CSS實現區域滑鼠事件的動態效果

相關推薦