JavaScript——鼠标滑过事件

来源：互联网发布：mysql统计不重复数据编辑：程序博客网时间：2024/05/21 23:17
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>第二题</title><style type="text/css">.top{background-color: #eee;}.top1{height: 90px;width: 190px;margin: 0px auto;padding-top:30px; }.left{border: 3px solid #eee;height: 500px;width: 150px;}.left ul{list-style: none;margin-top:5px;padding-left: 10px;}.left li{margin-top: 5px;}.right{position: relative;height: 500px;width: 1000px;background-color: #eee;top: -500px;left: 170px;}.hong{position: absolute;}</style><style type="text/css">        #box1{background-color: red;}        #box2{background-color: blue; display: none;height: 200px;width: 200px;background-color: blue;}    </style>    <script type="text/javascript">    function mmin(canshu) {    var xy = canshu.getElementById("xy");    xy.style.display = "block";    }    function mmout(canshu) {    var xy = canshu.getElementById("xy");    xy.style.display = "none";    }    </script></head><body><div class="top"><div class="top1"><h2>这是顶部区域</h2></div></div><div><div class="left"><ul><li><a id="an1" href="#" onmouseover="mmin(this)" onmouseout="mmout(this)">查看红色页面1</a></li><li><a id="an2" href="#" onmouseover="mmin(this)" onmouseout="mmout(this)">查看红色页面2</a></li><li><a id="an3" href="#" onmouseover="mmin(this)" onmouseout="mmout(this)">查看红色页面3</a></li><li><a id="an4" href="#" onmouseover="mmin(this)" onmouseout="mmout(this)">查看红色页面4</a></li></ul></div><div class="right"><div class="hong" id="xy">这是红1页面</div><div class="hong" id="xy">这是红2页面</div><div class="hong" id="xy">这是红3页面</div><div class="hong" id="xy">这是红4页面</div></div></div></body></html>
阅读全文
0 0