<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px auto;
padding: 0px;
}
.qcfu{
clear: both;
}
/*<div class="qcfu"></div>*/
body{
transition: 1s;
}
#sjone{
80px;
height: 50px;
background: darkblue;
margin-top: 20px;
border-radius: 10px;
line-height: 50px;
text-align: center;
color: white;
}
#sjone:hover{
cursor: pointer;
}
#sjtwo{
150px;
height: 20px;
margin-top: 20px;
}
#sjtwo:hover{
cursor: pointer;
}
#sjtwo_1{
200px;
height: 50px;
background: darkblue;
margin-top: 20px;
border-radius: 10px;
line-height: 50px;
text-align: center;
color: white;
display: none;
}
#sjthree{
1000px;
height: 100px;
background: gray;
margin-top: 60px;
border-radius: 10px;
line-height: 100px;
text-align: center;
color: white;
}
#sjthree:hover{
cursor: pointer;
}
.sjfour{
80px;
height: 50px;
background: darkblue;
margin-top: 20px;
border-radius: 10px;
line-height: 50px;
text-align: center;
color: white;
float: left;
margin-left: 600px;
}
.sjfour:hover{
cursor: pointer;
}
.sjfive{
80px;
height: 50px;
background: darkblue;
margin-top: 20px;
border-radius: 10px;
line-height: 50px;
text-align: center;
color: white;
float: left;
margin-left: 600px;
}
.sjfive:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="sjone" onclick="sjone()">按钮
</div>
<div id="sjtwo">
<input type="checkbox" name="" id="" value="" />鼠标经过出现按钮
</div>
<div id="sjtwo_1">你点不到我，哈哈
</div>
<div id="sjthree">鼠标经过这个div变高变色，移除再恢复
</div>
<div class="sjfour" onclick="sjfour_a()">按钮
</div>
<div class="sjfour" onclick="sjfour_b()" style="margin-left: 10px;">按钮
</div>
<div class="qcfu"></div>
<div class="sjfive" style="display: block;" onclick="sjfive()">按钮
</div>
<div class="sjfive" style="position: absolute; left: 90px; display: none;" onclick="sjfive_1()">按钮
</div>
</body>
</html>
<script type="text/javascript">
function sjone(){
alert("弹出窗口");
}
var sjtwo = document.getElementById("sjtwo");
sjtwo.onmouseover = function(){
var sjone_a = document.getElementById("sjtwo_1");
sjone_a.style.display = "block";
console.log(sjone_a);
}
sjtwo.onmouseout = function(){
var sjone_a = document.getElementById("sjtwo_1");
sjone_a.style.display = "none";
console.log(sjone_a);
}
var sjthree = document.getElementById("sjthree");
sjthree.onmouseover = function(){
sjthree.style.height = "200px";
sjthree.style.width = "500px";
sjthree.style.backgroundColor = "blue";
sjthree.style.transition = "1s";
}
sjthree.onmouseout = function(){
sjthree.style.height = "100px";
sjthree.style.width = "1000px";
sjthree.style.backgroundColor = "gray";
}
function sjfour_a(){
var sjfour_x = document.getElementsByTagName("body")[0];
sjfour_x.style.backgroundColor = "navajowhite";
sjfour_x.style.trasition = "1s";
}
function sjfour_b(){
var sjfour_x = document.getElementsByTagName("body")[0];
sjfour_x.style.backgroundColor = "cadetblue";
sjfour_x.style.transition = "1s";
}
var sjfive_a = document.getElementsByClassName("sjfive")[1];
function sjfive(){
var sjfive_b = sjfive_a.style.display;
if (sjfive_b == "none") {
sjfive_a.style.display = "block";
sjfive_a.innerHTML = "<<别点它";
sjfive_1a.innerHTML = "别点它>>";
} else{
sjfive_a.style.display = "none";
sjfive_1a.innerHTML = "点我";
}
}
var sjfive_1a = document.getElementsByClassName("sjfive")[0];
function sjfive_1(){
var sjfive_1b = sjfive_1a.style.display;
if (sjfive_1b == "none") {
sjfive_1a.style.display = "block";
sjfive_a.innerHTML = "<<别点它";
} else{
sjfive_1a.style.display = "none";
sjfive_a.innerHTML = "点我";
}
}
</script>