标签：jQuery box 孤身 非洲 电影 li 排行榜 同胞 height
* {
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");
});
});
标签：jQuery,box,孤身,非洲,电影,li,排行榜,同胞,height 来源： https://blog.csdn.net/weixin_43285360/article/details/121232779
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。