鼠标移上去变大改变背景颜色等
Posted 所爱隔山隔海
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鼠标移上去变大改变背景颜色等相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0px auto;
padding: 0px;
}
#anniu{
width:100px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: blue;
}
#anniu2{
width:100px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: blue;
}
#anniu3{
width:100px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: blue;
}
#anniu4{
width:100px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: blue;
display: none;
}
#continer{
width:100%;
height: 200px;
background-color: red;
}
#anniu5{
width:100px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: blue;
}
#anniu6{
width:100px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: blue;
display: none;
float:left;
}
</style>
<body>
<div id="anniu" onclick="tanChuang()">按钮</div>
<input type="button" name="" id="anniu2" value="按钮" onclick="tanChuang()"/>
<button id=anniu3 onclick="tanChuang()">按钮</button>
<br /> <br />
<label onmouseover="xianshi()" onmouseout="yincang()"><input type="checkbox" />鼠标经过出现按钮</label>
<button id="anniu4">按钮</button>
<br /> <br />
<div id="continer" onmouseover="yiRu()" onmouseout="yichu()">鼠标经过这个div变高变色，移出再恢复</div>
<div id="anniu3" onclick="change1()">颜色1 </div>
<br /> <br />
<div id="anniu3" onclick="change2()">颜色2 </div>
<br /> <br />
<br /> <br />
<button id="anniu5" onclick="showhide()">按钮1</button>
<button id="anniu6" onclick="showhide()">按钮2</button>
</body>
</html>
<script type="text/javascript">
function tanChuang() {
alert("弹出窗口");
}
function xianshi(){
var div1 =document.getElementById("anniu4");
div1.style.display="block";
}
function yincang(){
var div1 =document.getElementById("anniu4");
div1.style.display="none";
}
function yiRu(){
var div2=document.getElementById("continer");
div2.style.width = "80%";
div2.style.height = "400px";
div2.style.backgroundColor ="green"
}
function yichu(){
var div2=document.getElementById("continer");
div2.style.width = "100%";
div2.style.height = "200px";
div2.style.backgroundColor ="red "
}
function change1(){
var bodycolor=document.body;
bodycolor.style.backgroundColor="red";
}
function change2(){
var bodycolor=document.body;
bodycolor.style.backgroundColor="green";
}
function showhide(){
var showhide = document .getElementById("anniu6").style.display;
if(showhide==‘none‘){
document .getElementById("anniu6").style.display="block";
}else{
document .getElementById("anniu6").style.display="none";
}
}
</script>
以上是关于鼠标移上去变大改变背景颜色等的主要内容，如果未能解决你的问题，请参考以下文章