在html中,用盒子做网页怎么让图片变颜色,就是鼠标放在图片上就会变的那种,谢谢各位大神。

如题所述

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div变颜色</title>
<style>
#image{
width:200px;
height:200px;
background-color:#ccc;
}
p{
text-indent:2em;
padding:10px;
}
</style>
</head>
<body>
<div id="image" onclick="ToRed()" onmouseover="ToGreen()" onmouseout="ToBlue()">
<p>鼠标点击变红,鼠标移动到盒子内变绿,移出变蓝。</p>
<p>如果想让图片变色,可以把图片做成具有一定透明度的图片,改变背景颜色。</p>
</div>
<script type="text/javascript">
function ToRed(){
document.getElementById('image').style.backgroundColor="#f00";
}
function ToGreen(){
document.getElementById('image').style.backgroundColor="#0f0";
}
function ToBlue(){
document.getElementById('image').style.backgroundColor="#00f";
}
</script>
</body>
</html>

追问

谢谢你了。

哦哦,用到了javascript了谢谢你

你给我的代码全吗?今晚我试了你给我的代码怎么不行啊

温馨提示:答案为网友推荐,仅供参考
第1个回答  2015-04-29
用CSS
或者用JavaScript追问

恩大神,我用的css不知道怎么做呢,你能告诉我一下吗,谢谢了

追答

楼下有大神写了js的实现,
如果你一定要css的,可以参考这里:http://www.jb51.net/article/41124.htm

追问

谢谢你

相似回答