正文

鼠标滑过切换div显示（鼠标事件）

IP云
IP云V管理员/3 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>div切换</title>

<style type="text/css">

.dj{

    width: 400px;

    height: 400px;

    background-color:#A18325;

    display:none;

}

</style>

<script type="text/javascript">

window.onload = function (){

    var x1=document.getElementById("as");

        x1.onmouseover= function (){

            var xd1=document.getElementById("dg1");

                xd1.style.display='block'

            var xx1=document.getElementById("dg2");

                xx1.style.display='none'

        }

    var x2=document.getElementById("bs");

        x2.onmouseover= function (){

            var xd1=document.getElementById("dg2");

                xd1.style.display='block'

            var xx1=document.getElementById("dg1");

                xx1.style.display='none'

        }

}

</script>

</head>

<body>

<div style="width: 50px; height: 50px;background: #3355dd;" id="as"></div>

<div style="width: 50px; height: 50px;background: #6622dd;" id="bs"></div>

<div class="dj" id="dg1"> <br />

            第一个111111111111</div>

<div class="dj" id="dg2"> <br />

            第二个222222222222</div>

</body>

</html>

相关阅读

目录[+]