首页 > 代码库 > html中DIV鼠标滑过变换

html中DIV鼠标滑过变换

2024-07-31 04:00:02   220人阅读

<html>
 <head>
 <meta charset="utf-8">
 <title>无标题文档</title>
 <style type="text/css">
 #div1{
 width:200px;
 height:200px;
 background:#000;
 }
 #div2{
 width:200px;
 height:200px;
 background:#0F0;
 }
 #div3{
 width:200px;
 height:200px;
 background:#00F;
 }
 #div4{
 width:200px;
 height:200px;
 background:#F0F;
 }
 </style>
 <script type="text/javascript">
 function d1(){
 document.getElementById("div4").style.display="none";
 document.getElementById("div3").style.display="none";
 document.getElementById("div2").style.display="none";
 document.getElementById("div1").style.display="block";
 }
 function d2(){
 document.getElementById("div4").style.display="none";
 document.getElementById("div3").style.display="none";
 document.getElementById("div1").style.display="none";
 document.getElementById("div2").style.display="block";
 }
 function d3(){
 document.getElementById("div4").style.display="none";
 document.getElementById("div2").style.display="none";
 document.getElementById("div1").style.display="none";
 document.getElementById("div3").style.display="block";
 }
 function d4(){
 document.getElementById("div2").style.display="none";
 document.getElementById("div3").style.display="none";
 document.getElementById("div1").style.display="none";
 document.getElementById("div4").style.display="block";
 }
 </script>
 </head>
  
 <body>
 <a href="http://www.mamicode.com/#" onMouseOver="d1()">div1</a>
 <a href="http://www.mamicode.com/#" onMouseOver="d2()">div2</a>
 <a href="http://www.mamicode.com/#" onMouseOver="d3()">div3</a>
 <a href="http://www.mamicode.com/#" onMouseOver="d4()">div4</a>
 <div id="div1" style="display:block"></div>
 <div id="div2" style="display:none"></div>
 <div id="div3" style="display:none"></div>
 <div id="div4" style="display:none"></div>
  
 </body>
 </html>

html中DIV鼠标滑过变换


联系
我们