手风琴导航栏案例

麻烦大神看看为什么橙色的li有时候会扩不开移到别的li上它还会一闪一闪的谢谢

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			#box{
				width:1200px;
				height:400px;
				margin:100px auto;
				border:1px solid orangered;
			}
			#box ul{
				width:100%;
				height:100%;
				overflow: hidden;
			}
			#box ul li{
				float: left;
				width:240px;
				height:100%;
			}
			li:nth-of-type(1){
				background:red;
			}
			li:nth-of-type(2){
				background:darkgoldenrod;
			}
			li:nth-of-type(3){
				background:darkred;
			}
			li:nth-of-type(4){
				background:indianred;
			}
			li:nth-of-type(5){
				background:darkorange;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script src="jquery-1.2.6.min.js"></script>
		<script>
			$(function(){
				//给所有的li注册经过事件
				$('#box li').mouseover(function(){
					$(this).stop().animate({width:800}).siblings().stop().animate({width:100});
					console.log($(this));
				});
				$('#box').mouseout(function(){
					$('#box li').stop().animate({width:240});
				});
			});
		</script>
	</body>
</html>

慕粉2339245216

浏览 1287回答 1

1回答

MR帽子先生

你好可以应该是浏览器的问题，我在我的浏览器上显示是正常的，希望能帮到你，祝你学习愉快。

0 0

随时随地看视频慕课网APP