900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html 鼠标放上去变色 css3 鼠标经过div背景变色

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

时间:2019-02-17 21:34:42

相关推荐

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标签

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。