<style type="text/css">
#z{
width: 1200px;
height: 1000px;
background-color: white;
}
.noe{
width: 1000px;
height: 100px;
background-color:aqua;
}
.two{
width: 1000px;
height: 50px;
background-color:aliceblue;
}
.two1{
width: 1000px;
height: 150px;
background-color:red;
}
.two2{
width: 1000px;
height: 50px;
background-color:white;
}
#three{
width: 1000px;
height: 50px;
background-color:aquamarine;
}
#four{
width: 1000px;
height: 50px;
background-color:blueviolet;
}
#four1{
width: 100px;
height: 20px;
background-color: aliceblue;
border-radius: 25px;
text-align: center;
}
#four2{
width: 100px;
height: 20px;
background-color: aliceblue;
border-radius: 25px;
text-align: center;
display: none;
}
#five{
width: 1000px;
height: 50px;
background-color:chartreuse;
}
#sex{
width: 1000px;
height: 50px;
background-color:burlywood;
}
#sex1{
width: 300px;
height: 100px;
border: 1px solid black;
border-radius: 25px;
}
#r{
width: 1000px;
height: 50px;
background-color:fuchsia;
}
#pop{
background-color: aliceblue;
}
<!--当点击下面的div时,弹出窗口-->
<div class="noe">说明事件
<input type="button" name="" id="" value="按钮" onClick="aa()">
</div>
function aa(){
alert("弹窗");
}
<!--当鼠标移到下面的div时,显示按钮,当移出时,按钮消失-->
<div id="five">
<span calss="five1" onMouseMove="f()" onMouseOut="g()">今天有风</span>
<span class="fivee" style="display: none" >今天没风</span>
</div>
//f方法,鼠标移入时,显示内容
function f(){
var fivee = document.getElementsByClassName("fivee")[0];
fivee.style.display = "block";
}
function g(){
var fivee = document.getElementsByClassName("fivee")[0];
fivee.style.display = "none";
}
<!--通过一个if的判断,来判断当display为隐藏时,设置为显示,当其为显示时,设置为隐藏-->
<div id="r">
<div id="po" onClick="ss()">董哥我男神</div>
<div id="pop" style="display: none">没错</div>
</div>
用==
var a = document.getElementById("pop");
if(a.style.display == "none"){
a.style.display = "block";
}else{a.style.display = "none";
}
}