jQuery——排行榜

最新推荐文章于 2022-03-29 08:45:42 发布

与梦想同在

最新推荐文章于 2022-03-29 08:45:42 发布

阅读量906

点赞数

分类专栏： JAVA 文章标签： mouseenter mouseleave 排行榜

本文链接：https://blog.csdn.net/qq_41973154/article/details/100535122

版权

JAVA 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>电影排行榜</title>
		<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 300px;
				height: 600px;
				border: 1px solid #A9A9A9;
				margin: 50px auto; 
				padding: 5px;
			}
			h4{
				border-bottom: 1px solid #000000;
				line-height: 28px;
				color: #C71585;
				padding-left: 10px;
			}
			ul>li{
				list-style: none;
				border: 1px dashed #A9A9A9;
				padding: 5px 10px;
				
			}
			ul>li:nth-child(-n+3) span{
				background-color: mediumvioletred;
			}
			ul>li>span{
				display: inline-block;
				width: 20px;
				height: 20px;
				background-color: #A9A9A9;
				text-align: center;
				padding-left: 5px;
				margin-right: 10px;
			}
			.current{
				overflow: hidden;
				margin-top: 5px;
				display: none;
			}
			.current>img{
				width: 70px;
				height: 100px;
			}
			.current>p{
				width: 200px;
				height: 100px;
				float: right;
				font-size: 12px;
				height: 20px;
				
			}
			
			.libox .current{
				display: block;
			}
			
		</style>
		
		<script type="text/javascript">
			$(function(){
				$("li").mouseenter(function(){
					$(this).addClass("libox");
				});
				$("li").mouseleave(function(){
					$(this).removeClass("libox");
				})
			});
		</script>
	</head>
	<body>
		<div class="box">
			<h4>电影排行榜</h4>
			<ul>
				<li><span>1</span>哪吒之魔童降世
				<div class="current">
					<img src="image/12.jpg"></img>
					<p>《哪吒之魔童降世》是由霍尔果斯彩条屋影业有限公司出品的动画电影，
					由饺子执导兼编剧，吕艳婷、囧森瑟夫、瀚墨、陈浩、绿绮、张珈铭、
					杨卫担任主要配音。该片改编自中国神话故...</p>
				</div>
				</li>
				<li><span>2</span>速度与激情
				<div class="current">
					<img src="image/12.jpg"></img>
					<p>《哪吒之魔童降世》是由霍尔果斯彩条屋影业有限公司出品的动画电影，
					由饺子执导兼编剧，吕艳婷、囧森瑟夫、瀚墨、陈浩、绿绮、张珈铭、
					杨卫担任主要配音。该片改编自中国神话故...</p>
				</div>
				</li>
				<li><span>3</span>上海堡垒
				<div class="current">
					<img src="image/12.jpg"></img>
					<p>《哪吒之魔童降世》是由霍尔果斯彩条屋影业有限公司出品的动画电影，
					由饺子执导兼编剧，吕艳婷、囧森瑟夫、瀚墨、陈浩、绿绮、张珈铭、
					杨卫担任主要配音。该片改编自中国神话故...</p>
				</div>
				</li>
				<li><span>4</span>终结者
				<div class="current">
					<img src="image/12.jpg"></img>
					<p>《哪吒之魔童降世》是由霍尔果斯彩条屋影业有限公司出品的动画电影，
					由饺子执导兼编剧，吕艳婷、囧森瑟夫、瀚墨、陈浩、绿绮、张珈铭、
					杨卫担任主要配音。该片改编自中国神话故...</p>
				</div>
				</li>
				<li><span>5</span>复仇者联盟4：终局之战
				<div class="current">
					<img src="image/12.jpg"></img>
					<p>《哪吒之魔童降世》是由霍尔果斯彩条屋影业有限公司出品的动画电影，
					由饺子执导兼编剧，吕艳婷、囧森瑟夫、瀚墨、陈浩、绿绮、张珈铭、
					杨卫担任主要配音。该片改编自中国神话故...</p>
				</div>
				</li>
				<li><span>6</span>烈火英雄
				<div class="current">
					<img src="image/12.jpg"></img>
					<p>《哪吒之魔童降世》是由霍尔果斯彩条屋影业有限公司出品的动画电影，
					由饺子执导兼编剧，吕艳婷、囧森瑟夫、瀚墨、陈浩、绿绮、张珈铭、
					杨卫担任主要配音。该片改编自中国神话故...</p>
				</div>
				</li>
			</ul>
		
		</div>
	</body>
</html>

效果图：
在这里插入图片描述