html 鼠标放上去变色,css3 鼠标经过div背景变色

鼠标经过网页的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对象

超级链接1

③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中的A标签