電影排行榜
<!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 刪除就可以了。