制作全网热播视频页面

潇以禾

于 2022-11-27 16:24:02 发布

阅读量1.1k

点赞数 4

文章标签： css html css3

本文链接：https://blog.csdn.net/sw995/article/details/127980063

版权

需求说明使用选择器:not( ) 设置图片与右侧内容间距10px 使用选择器:last设置右侧列表背景颜色为#f0f0f0 使用层次选择器、:first、:not( )设置前三个视频名称前的数字1、2、3背景颜色为#f0a30f，后面的数字背景颜色为#a4a3a3 3、5、6、7后的箭头向上，4、8、9、10后的箭头向下鼠标移至右侧列表上时，显示对应的隐藏内容“”加入清单，鼠标离开后隐藏内容

（课堂作业网上搜发现代码不全本人增改作为补充）

$(document).ready(function () {
$("ul>li:not(:last)").css({"margin-right": "10px"});
$("ul>li:not(:last) span,ul>li:last li:first span").css({"background-color": "#f0a30f"});
$("ol li:gt(0) span").css({"background-color": "#a4a3a3"});
$("ul>li:last").css({"background-color": "#f0f0f0"});
$(" ol li:eq(0),ol li:eq(2),ol li:eq(3),ol li:eq(4)").css({
"background-image": "url(images/orange.jpg)",
"background-repeat": "no-repeat",
"background-position": "right -2px"
});
$(" ol li:eq(1),ol li:eq(5),ol li:eq(6),ol li:eq(7)").css({
"background-image": "url(images/green.jpg)",
"background-repeat": "no-repeat",
"background-position": "right -2px"
});

 $("ol li").mouseover(function (){  //难点补充修改代码
                $(this).find("p").show();
            })
            $("ol li").mouseout(function (){
                $(this).find("p").hide();
            })

});

<body>
<section id="play">
<h1>全网热播视频</h1>
<ul>
<li><img src="images/flv01.jpg">昊花梦1</li>
<li><img src="images/flv02.jpg">好先生2</li>
<li>
<ol>
<li>3三八线加入看单</li>
<li>4吉详天宝加入看单</li>
<li>5亲爱的翻译官加入看单</li>
<li>6仙剑云之凡加入看单</li>
<li>7权力的游戏第五季加入看单</li>
<li>8琅琊榜加入看单</li>
<li>9那年青春我们正好加入看单</li>
<li>10乡村受情8（上）加入看单</li>
</ol>
</li>
</ul>
</section>
</body>