切换城市效果,该怎么解决-ASP.NET教程-爱易网页

切换城市效果,该怎么解决

日期：2014-05-18　浏览次数：20466 次

切换城市效果
做一个切换城市效果，功能是鼠标移上去时显示分站列表，移开时隐藏列表

用了两种方案去做：
一种是Js+Div+Css 效果：http://www.jiushu8.com/rrr.html
一种是纯Div+Css 效果：http://www.jiushu8.com/rrr1.html

现在是两种效果都存在一个问题，鼠标移上去时显示列表后一下就隐藏了，这样的话就没办法去点击里面的分站链接了。
我知道问题的原因在哪里，只想求个好点的解决方案，谢谢！

------解决方案--------------------

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>城市切换</title>
<meta http-equiv="Content-Type" content="texthtml; charset=gb2312" />
<style type="text/css">
body{font-size:12px;}

#site_box{
    position:absolute;
    width:300px;
    z-index:99;
    background-color: #FFFFFF;
    border: 1px solid #000000;
}
#area_box .s1,#area_box .s2,#area_box .s3,#area_box #info{position:relative;left:-1px;top:-1px;}
#area_box .s1 {background:#f1f0f1;}
#area_box .s2 {background:#dbdadb;}
#area_box .s3 {
    background-color: #FFFFFF;
}
#area_box #info {border:1px solid #0066CC;padding:10px;}
#area_box ul{margin:0px;padding:0px;line-height:20px;}
#area_box ul li{list-style:none;display:inline;margin:0 6px;}
#area_box .join{text-align:right;margin-top:10px;}
.show{left:10px;top:51px;}
.hide{left:-3000px;top:51px;}
.sitea {
    display: block;
    line-height: 33px;
    height: 33px;
    width: 122px;
    text-align: center;
    background-color: #0099FF;
    color: #FFFFFF;
}
</style>
<script language="javascript">
function show()
{
    document.getElementById('site_box').className='';
    
}
function hide()
{
document.getElementById('site_box').className='hide';
}
</script>
</head>
<body>
<a href="#" onmouseover="show()"onmouseout="hide()" class="sitea">切换城市</a>
<div id="site_box" onmouseover="show()"onmouseout="hide()" class="hide">
  <div id="area_box">
    <div class="s1">
      <div class="s2">
        <div class="s3">
          <div id="info"> <img src="wait.gif" /> 加载中，请稍候...
            <ul>
              <li><a href="">总　站</a></li>
              <li><a href="">东莞站</a></li>
              <li><a href="">深圳站</a></li>
              <li><a href="">北京站</a></li>
              <li><a href="">天津站</a></li>
              <li><a href="">东莞站</a></li>
              <li><a href="">深圳站</a></li>
              <li><a href="">北京站</a></li>
              <li><a href="">天津站</a></li>
              <li><a href="">东莞站</a></li>
              <li><a href="">深圳站</a></li>
              <li><a href="">北京站</a></li>
              <li><a href="">天津站</a></li>
            </ul>
            <div class="join">[ <a href="">加盟我们..</a> ]</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
sdfsdfsdfs
</body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

切换城市效果,该怎么解决

相关资料更多>

推荐阅读更多>