鼠标经过网页的DIV，可以增加一些特效，诸如让DIV背景颜色发生改变。
一般情况下，可以使用CSS和JS配合来完成，也可以单独使用CSS3来完成。下面逐一介绍。
一、CSS和JS联合使用
①CSS代码
#div1 {padding:9px 13px;background:#009900; width:1300px; word-spacing: -8px;MARGIN-RIGHT: auto; MARGIN-LEFT: auto;}
②页面中的DIV对象
<div id="div1">
<a href="#" onmouseout="ResetChangeBGColor('div1')" onMouseOver="ChangeBGColor('div1')">超级链接1</a>
</div>
③JS代码
function ChangeBGColor(obj)
{
var DivID=obj.id;
document.getElementById(DivID).style.backgroundColor="#FFFFFF";
document.getElementById(DivID).style.color="#009900";
}
function ResetChangeBGColor(obj)
{
var DivID=obj.id;
document.getElementById(DivID).style.backgroundColor="";
document.getElementById(DivID).style.color="";
}
二、单独使用CSS来完成
关于CSS代码，使用下面的简单代码就可以了。
网页中的CSS为
#div1{
border: none;
display: inline-block;
outline: 0;
padding: 8px 16px;
color: #fff;
background-color: #F88E8B;
text-align: center;
box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);
width:50x;
}
#div1:hover
{
background-color: #eee;
}
网页中的DIV对象为
<div id="div1">
<a target="_blank" href="#">DIV中的A标签</a>
</div>