您的位置：首页 > 其它

鼠标悬停效果

2017-09-26 16:32 113 查看

鼠标悬停，点击效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
button{
border: 0;
}
img{
margin: 50%;
}
</style>
<script>
function changeColor( str){
document.getElementById("color").style.backgroundColor=str;
}
//笑
function myOver(){
document.getElementById("tp").src="img/haha.gif";

}
//哭
function myOut(){
document.getElementById("tp").src="img/cry.jpg";

}

</script>
</head>
<body id="color">
<button onclick="changeColor('pink')">粉色</button>
<button onclick="changeColor('orange')">橙色</button>
<button onclick="changeColor('grey')">灰色</button>
<button onclick="changeColor('lightgreen')">豆绿色</button>

<div  onmouseover="myOver()" onmouseout="myOut()" style="float: left;">
<img id="tp" src="img/cry.jpg" />
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 鼠标

相关文章推荐

新的分享

章节导航