切换城市效果,该怎么解决
日期：2014-05-18 浏览次数：20401 次
切换城市效果
做一个切换城市效果，功能是鼠标移上去时显示分站列表，移开时隐藏列表
用了两种方案去做：
一种是Js+Div+Css 效果：http://www.jiushu8.com/rrr.html
一种是纯Div+Css 效果：http://www.jiushu8.com/rrr1.html
现在是两种效果都存在一个问题，鼠标移上去时显示列表后一下就隐藏了，这样的话就没办法去点击里面的分站链接了。
我知道问题的原因在哪里，只想求个好点的解决方案， 谢谢！
------解决方案--------------------
做一个切换城市效果，功能是鼠标移上去时显示分站列表，移开时隐藏列表
用了两种方案去做：
一种是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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
