代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<style>
#main_body{
overflow:hidden;
}
#zuo{
float: left;
}
#you{
float: left;
}
.city{
list-style-type: none;
width: 80px;
text-align: center;
font-size: 22px;
line-height: 1.6;
padding: 0px 0px;
margin: 0px 0px;
}
.area{
list-style-type: none;
width: 50px;
text-align: center;
font-size: 14px;
line-height: 1.6;
color: aliceblue;
padding: 0px 0px;
margin: 0px 0px;
position: absolute;
left: 95px;
top: 23px;
display: none;
}
.city > li{
background-color: darksalmon;
border-bottom: 1px solid white;
}
.area > li{
background-color: cadetblue;
border-bottom: 1px solid white;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$('#yi').mouseenter(function(){
$('#yc').fadeIn('fast').animate({width:'55px'},'fast');
});
$('#yi').mouseleave(function(){
$('#yc').animate({width:'50px'}).fadeOut();
});
$('#jin').mouseenter(function(){
$('#jz').fadeIn('fast').animate({width:'55px'},'fast');
});
$('#jin').mouseleave(function(){
$('#jz').animate({width:'50px'}).fadeOut();
});
$('#xiao').mouseenter(function(){
$('#xg').fadeIn('fast').animate({width:'55px'},'fast');
});
$('#xiao').mouseleave(function(){
$('#xg').animate({width:'50px'}).fadeOut();
});
$('#xian').mouseenter(function(){
$('#xn').fadeIn('fast').animate({width:'55px'},'fast');
});
$('#xian').mouseleave(function(){
$('#xn').animate({width:'50px'}).fadeOut();
});
})
// window.onload = function() {
// document.getElementById('yi').onmouseenter = function(){
// let elm = document.getElementById('yc');
// elm.style.display = 'inline';
// }
// document.getElementById('yi').onmouseout = function(){
// let elm = document.getElementById('yc');
// elm.style.display = 'none';
// }
// document.getElementById('jin').onmouseenter = function(){
// let elm = document.getElementById('jz');
// elm.style.display = 'inline';
// }
// document.getElementById('jin').onmouseout = function(){
// let elm = document.getElementById('jz');
// elm.style.display = 'none';
// }
// document.getElementById('xiao').onmouseenter = function(){
// let elm = document.getElementById('xg');
// elm.style.display = 'inline';
// }
// document.getElementById('xiao').onmouseout = function(){
// let elm = document.getElementById('xg');
// elm.style.display = 'none';
// }
// document.getElementById('xian').onmouseenter = function(){
// let elm = document.getElementById('xn');
// elm.style.display = 'inline';
// }
// document.getElementById('xian').onmouseout = function(){
// let elm = document.getElementById('xn');
// elm.style.display = 'none';
// }
// }
</script>
</head>
<body>
<div id="main_body">
<div id="zuo">
<ul class="city">
<li id="jin">荆州</li>
<li id="yi">宜昌</li>
<li id="xiao">孝感</li>
<li id="xian">咸宁</li>
</ul>
</div>
<div id="you">
<ul id="yc" class="area">
<li>当阳</li>
<li>长阳</li>
<li>枝江</li>
<li>宜都</li>
<li>秭归</li>
</ul>
<ul id="jz" class="area">
<li>area a</li>
<li>area b</li>
<li>area c</li>
<li>area d</li>
<li>area e</li>
</ul>
<ul id="xg" class="area">
<li>area A</li>
<li>area B</li>
<li>area C</li>
<li>area D</li>
<li>area E</li>
</ul>
<ul id="xn" class="area">
<li>area 1</li>
<li>area 2</li>
<li>area 3</li>
<li>area 4</li>
<li>area 5</li>
</ul>
</div>
</div>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。