* {
margin: 0;
padding: 0;
}
.Box {
width: 300px;
height: 450px;
margin: 50px auto;
border: 1px solid #000;
}
.Box>h1 {
font-size: 20px;
line-height: 35px;
padding-left: 10px;
border: 1px dashed #ccc;
}
.Box>ul>li {
list-style: none;
padding: 5px 10px;
border: 1px dashed #ccc;
}
.Box>ul>li:nth-child(-n+3) span {
background: #f40;
}
.Box>ul>li>span {
display: inline-block;
width: 20px;
height: 20px;
background: #ccc;
text-align: center;
line-height: 20px;
margin-right: 10px;
}
.content {
overflow: hidden;
margin-top: 5px;
display: none;
}
.Box>ul>li>.content>img {
width: 85px;
height: 120px;
float: left;
}
.Box>ul>li>.content>p {
width: 180px;
height: 120px;
float: right;
font-size: 12px;
line-height: 20px;
}
.current .content {
display: block;
} <div class="Box">
<h1>电影排行榜</h1>
<ul>
<li>
<span>1</span> 电影名称
<div class="content">
<img src="img/zl.jpg" alt="">
<p>简介： 故事发生在非洲附近的大海上，主人公冷锋遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场非洲国家叛乱，本可以安全撤离，却因无法忘记曾经为军人的使命，孤身犯险冲回沦陷区，带领身陷屠杀中的同胞和难民，展开生死逃亡。随着斗争的持续，体内的狼性逐渐复苏，最终孤身闯入战乱区域，为同胞而战斗。</p>
</div>
</li>
<li>
<span>2</span> 电影名称
<div class="content">
<img src="img/zl.jpg" alt="">
<p>简介： 故事发生在非洲附近的大海上，主人公冷锋遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场非洲国家叛乱，本可以安全撤离，却因无法忘记曾经为军人的使命，孤身犯险冲回沦陷区，带领身陷屠杀中的同胞和难民，展开生死逃亡。随着斗争的持续，体内的狼性逐渐复苏，最终孤身闯入战乱区域，为同胞而战斗。</p>
</div>
</li>
<li>
<span>3</span> 电影名称
<div class="content">
<img src="img/zl.jpg" alt="">
<p>简介： 故事发生在非洲附近的大海上，主人公冷锋遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场非洲国家叛乱，本可以安全撤离，却因无法忘记曾经为军人的使命，孤身犯险冲回沦陷区，带领身陷屠杀中的同胞和难民，展开生死逃亡。随着斗争的持续，体内的狼性逐渐复苏，最终孤身闯入战乱区域，为同胞而战斗。</p>
</div>
</li>
<li>
<span>4</span> 电影名称
<div class="content">
<img src="img/zl.jpg" alt="">
<p>简介： 故事发生在非洲附近的大海上，主人公冷锋遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场非洲国家叛乱，本可以安全撤离，却因无法忘记曾经为军人的使命，孤身犯险冲回沦陷区，带领身陷屠杀中的同胞和难民，展开生死逃亡。随着斗争的持续，体内的狼性逐渐复苏，最终孤身闯入战乱区域，为同胞而战斗。</p>
</div>
</li>
<li>
<span>5</span> 电影名称
<div class="content">
<img src="img/zl.jpg" alt="">
<p>简介： 故事发生在非洲附近的大海上，主人公冷锋遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场非洲国家叛乱，本可以安全撤离，却因无法忘记曾经为军人的使命，孤身犯险冲回沦陷区，带领身陷屠杀中的同胞和难民，展开生死逃亡。随着斗争的持续，体内的狼性逐渐复苏，最终孤身闯入战乱区域，为同胞而战斗。</p>
</div>
</li>
<li>
<span>6</span> 电影名称
<div class="content">
<img src="img/zl.jpg" alt="">
<p>简介： 故事发生在非洲附近的大海上，主人公冷锋遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场非洲国家叛乱，本可以安全撤离，却因无法忘记曾经为军人的使命，孤身犯险冲回沦陷区，带领身陷屠杀中的同胞和难民，展开生死逃亡。随着斗争的持续，体内的狼性逐渐复苏，最终孤身闯入战乱区域，为同胞而战斗。</p>
</div>
</li>
</ul>
</div>
<script src="js/jquery-1.8.3.js"></script> $(function() {
// //1.监听li的移入事件
// $("li").mouseenter(function() {
// $(this).addClass("current");
// });
// //2.监听li的移出事件
// $("li").mouseleave(function() {
// $(this).removeClass("current");
// });
//或者利用 hover 进行简化
$("li").hover(function() {
$(this).addClass("current");
}, function() {
$(this).removeClass("current");
});
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
