电影排行榜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排行榜</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 450px;
margin: 0 auto;
border: 1px solid #000000;
}
ul>li {
list-style: none;
padding: 5px 10px;
border:1px dashed #cccccc;
}
.box>h1{
font-size: 20px;
padding: 10px;
color: deeppink;
/*设置字体的行间距*/
line-height: 35px;
border-bottom: 1px dashed #cccccc;
}
li>span{
/*span是内联元素display修改内联元素为块元素*/
display: inline-block;
width: 20px;
height: 20px;
background: #cccccc;
text-align: center;
margin-right: 10px;
}
ul>li:nth-child(-n+5) span{
background: deeppink;
}
.content{
/*防止元素溢出 hidden没有滚动条*/
overflow: hidden;
/*设置上外边距*/
margin-top: 5px;
/*让元素不能显示*/
display: none;
}
.content>img{
width: 90px;
height: 120px;
float: left;
}
.content>p{
width: 80px;
height: 120px;
float: right;
font-size: 12px;
/*设置行高*/
line-height: 20px;
}
.current .content{
/*此元素将显示为块级元素，此元素前后会带有换行符。*/
display: block;
}
</style>
<script type="text/javascript" src="../../jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
$(function () {
$("li").hover(function () {
/*向元素中添加.current*/
$(this).addClass("current")
},function () {
$(this).removeClass("current")
})
/*另一种方法*/
// $("li").mouseenter(function () {
// /*添加current*/
// $(this).addClass("current")
// });
//
// $("li").mouseleave(function () {
// /*添加current*/
// $(this).removeClass("current")
// });
})
</script>
</head>
<body>
<div class="box">
<h1>电影排行榜</h1>
<ul>
<li><span>1</span>电影排行榜
<div class="content">
<img src="p01.webp" alt="">
<p>
1917年，第一次世界大战进入最激烈之际，两个年仅16岁的英国士兵接到的命令，需立即赶往死亡前线，
向那里的将军传达一个“立刻停止进攻”讯息。 时间只有八小时，武器弹药有限，无人知晓前方敌况：死亡寂静之地、
布满尸体的铁丝网、突入其来的敌军、随时毙命的危险境况…… 这一次两个少年为救1600个人的性命，不完成，毋宁死！
</p>
</div>
</li>
<li><span>2</span>电影排行榜</li>
<li><span>3</span>电影排行榜</li>
<li><span>4</span>电影排行榜</li>
<li><span>5</span>电影排行榜</li>
<li><span>6</span>电影排行榜</li>
</ul>
</div>
</body>
</html>
主要原理
使用事件监听，来监听事件，当事件移入的时候，添加
.current .content{
/*此元素将显示为块级元素，此元素前后会带有换行符。*/
display: block;
}
前面默认是none不显示，当移入是让它变为显示，在监听移除事件把.current 删除就可以了。
