1.onmouseover-and-onmouseout


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>my first js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
#div1 
{
width: 200px; 
       height: 100px; 
       background: #cccccc; 
       border: 1px solid #999999;
       display: none;
}
    </style> 
</head>
<body>
    <input type="checkbox"
onmouseover="document.getElementById('div1').style.display='block'";
onmouseout="document.getElementById('div1').style.display='none'"/>
    <div id="div1">
        为了您的信息安全。。。
    </div>
    <!---<input type="button" value="按钮" onclick="alert('dfdas')"-->
</body>
</html>

//设置div1的style属性值为
宽:200px;
高:100px;
背景颜色:灰色;
边框:1px像素,实心边框;
默认不显示;
//document.getelementbyid(‘div1’).style.display = div1.style.display
为了兼容性问题所以使用getelementbyid
get element by id
通过 元素 用 id = 通过id获取元素

//input属性:复选框:
onmouseover(当鼠标移入):显示div1;
onmouseout(当鼠标移出):隐藏div1;

  • 分析效果实现原理
    样式:Div的display
    事件:onmouseover,onmouseout
  • 特效基础
    事件驱动:onmouseover
    元素属性操作:obj.style.[…] 例如:div.style.background=’green’;

发表评论

电子邮件地址不会被公开。 必填项已用*标注