<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0 auto;
padding: 0;
}
body{
transition: 1s;
}
#first{
width: 100px;
height: 60px;
background-color:#00008B;
border-radius: 5px;
text-align: center;
line-height: 60px;
font-size: 22px;
color: white;
}
#first:hover{
cursor: pointer;
}
#second{
width: 160px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 15px;
}
#a1{
width: 100px;
height: 60px;
background-color:#00008B;
border-radius: 5px;
margin-top: 20px;
text-align: center;
line-height: 60px;
font-size: 22px;
display: none;
color: white;
}
#second:hover{
cursor: pointer;
}
#third{
width: 700px;
height: 100px;
background-color: #00008B;
margin-top: 100px;
border-radius: 10px;
text-align: center;
line-height: 100px;
color: white;
}
#third:hover{
cursor: pointer;
}
.four{
width: 100px;
height: 60px;
background-color:#00008B;
border-radius: 5px;
margin-top: 80px;
margin-left: 500px;
text-align: center;
line-height: 60px;
font-size: 22px;
color: white;
float: left;
}
.fifth{
width: 100px;
height: 60px;
background-color:#00008B;
border-radius: 5px;
margin-top: 80px;
margin-left: 500px;
text-align: center;
line-height: 60px;
font-size: 22px;
color: white;
float: left;
}
.fifth:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="first" onclick="first()">
按钮
</div>
<div id="second">
<input type="checkbox" name="" id="" value="" onmousemove="second()"/>鼠标经过出现按钮
</div>
<div id="a1">
点我
</div>
<div id="third">
鼠标经过这个div变高变色，移除再恢复
</div>
<div class="four" onclick="four1()">
按钮
</div>
<div class="four" onclick="four2()" style="margin-left: 80px;">
按钮
</div>
<div class="fifth" onclick="fifth()">
按钮
</div>
<div class="fifth" onclick="fifth()" style="margin-left: 40px;display: none;">
按钮
</div>
</body>
</html>
<script type="text/javascript">
function first(){
alert("弹出窗口");
}
var second = document.getElementById("second");
second.onmouseover = function(){
var second1 = document.getElementById("a1");
second1.style.display = "block";
}
second.onmouseout = function(){
var second1 = document.getElementById("a1");
second1.style.display = "none";
}
var third = document.getElementById("third");
third.onmouseover = function(){
third.style.height = "200px";
third.style.backgroundColor = "red";
third.style.transition = "3s";
}
var third = document.getElementById("third");
third.onmouseout = function(){
third.style.height = "100px";
third.style.backgroundColor = "#00008B";
}
function four1(){
var four3 = document.getElementsByTagName("body")[0];
four3.style.backgroundColor = "darkmagenta";
four3.style.transition = "1s";
}
function four2(){
var four3 = document.getElementsByTagName("body")[0];
four3.style.backgroundColor = "#C69500";
four3.style.transition = "1s";
}
var fifth1 = document.getElementsByClassName("fifth")[1];
var fifth2 = fifth1.style.display;
function fifth(){
if(fifth2 == "none"){
fifth1.style.display = "block";
fifth2 = "block";
}else{
fifth1.style.display = "none";
fifth2 = "none";
}
}
</script>
浙公网安备 33010602011771号