<title>电影风云榜</title>
<style>
/*清空默认样式*/
*{padding:0;margin:0;border:0;list-style:none;}
/*设置div盒子宽度和边框和盒子居中*/
.all{width:320px;height:auto;border:1px solid #ccc;margin:50px auto;}
/*设置每个li底部虚线*/
.all li{border-top:1px dashed #cccccc;overflow: hidden;}
/*设置h3高度和颜色*/
.all h3{height: 40px;color:deeppink;line-height:40px;text-align: center;}
/*设置文字*/
.title{height: 40px;line-height: 40px;}
/*设置文字左边span样式*/
.title span{width: 20px;height: 20px;background: #ccc;color:#ffff;text-align:center;
line-height:20px;float: left;margin-top: 10px;}
/* 选择前三个li的title类名里面的span */
/*设置前三个span颜色*/
.all li:nth-of-type(-n+3) .title span{background: deeppink;}
/*设置图片宽度浮动元素*/
.desc img{width: 100px;float: left;margin-right:10px;padding-bottom: 10px;}
.desc p{font-size:14px;line-height: 26px;color: #666666;}
.desc{display: none;}
/* 选择第一个li里面的desc设置显示 */
.all li:nth-of-type(1) .desc{display: block;}
</style>
<script src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="all">
<h3>电影风云榜</h3>
<ul class="allIn">
<li>
<p class="title">
<span>1</span>汉城</p>
<div class="desc">
<img src="images/001.jpg" alt="">
<p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
</div>
</li>
<li>
<p class="title">
<span>2</span>汉城</p>
<div class="desc">
<img src="images/002.jpg" alt="">
<p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
</div>
</li>
<li>
<p class="title">
<span>3</span>汉城</p>
<div class="desc">
<img src="images/003.jpg" alt="">
<p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
</div>
</li>
<li>
<p class="title">
<span>4</span>汉城</p>
<div class="desc">
<img src="images/004.jpg" alt="">
<p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
</div>
</li>
<li>
<p class="title">
<span>5</span>汉城</p>
<div class="desc">
<img src="images/005.jpg" alt="">
<p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、
赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p>
</div>
</li>
</ul>
</div>
<script>
//鼠标移上li,控制当前li里面的desc显示,其他兄弟li里面的desc隐藏
$(".all li").mouseenter(function () {
// $(DOM标签对象) li标签的子节点 .desc
$(this).children(".desc").show();
//li标签子节点的兄弟节点，隐藏
$(this).siblings().children(".desc").hide();
});
