<!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>