求前辈帮我把鼠标点击弹出效果改为划过弹出 谢谢了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ss</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{ font-size:12px; font-family:arial;}
.show{ position:relative;}
.show a { font-size:12px; color:#333; font-weight:bold;}
.hidden { width:280px; position:absolute; top:25px; left:0; background:#fff; padding:1px; border:1px solid #BDBEBD; z-index:999;}
.hidden h2 { background:#D2D9D0; font-size:12px; line-height:20px; margin:1px; padding-right:5px; text-indent:5px;}
.hidden h2 a { display:block; float:right; text-align:right;}
.hidden p{ padding:0 5px;}
</style>
</head>
<body>
 
<script language="javascript">
function DIVShow(i){
    if( document.getElementById(i).style.display=='')
       document.getElementById(i).style.display = 'none';
    else
       document.getElementById(i).style.display = '';
}
</script>
 
        <div class="show" ><a href="javascript:DIVShow('hidden')" onmouseover="DIVShow('hidden')">点击这里打开隐藏层</a>
          <div style="display:none;" id="hidden" class="hidden">
            <h2><a onclick="javascript:document.getElementById('hidden').style.display='none';" class="red" href="#">[关闭层]</a>隐藏层</h2>
            <p>这里显示的是隐藏层的内容，这里显示的是隐藏层的内容，这里显示的是隐藏层的内容，这里显示的是隐藏层的内容</p>
          </div>
        </div>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>ss</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body{ font-size:12px; font-family:arial;}
    .show{ position:relative;}
    .show a { font-size:12px; color:#333; font-weight:bold;}
    .hidden { width:280px; position:absolute; top:25px; left:0; background:#fff; padding:1px; border:1px solid #BDBEBD; z-index:999;}
    .hidden h2 { background:#D2D9D0; font-size:12px; line-height:20px; margin:1px; padding-right:5px; text-indent:5px;}
    .hidden h2 a { display:block; float:right; text-align:right;}
    .hidden p{ padding:0 5px;}
    </style>
    </head>
    <body>
     
    <script language="javascript">
    function DIVShow(i){
        if( document.getElementById(i).style.display=='')
           document.getElementById(i).style.display = 'none';
        else
           document.getElementById(i).style.display = '';
    }
    </script>
     
            <div class="show" ><a href="javascript:void(0)" onmouseover="DIVShow('hidden')">点击这里打开隐藏层</a>
              <div style="display:none;" id="hidden" class="hidden">
                <h2><a onclick="javascript:document.getElementById('hidden').style.display='none';" class="red" href="#">[关闭层]</a>隐藏层</h2>
                <p>这里显示的是隐藏层的内容，这里显示的是隐藏层的内容，这里显示的是隐藏层的内容，这里显示的是隐藏层的内容</p>
              </div>
            </div>
    </body>
    </html>