jQuery实现全网热播视频

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

jQuery代码：

$(function(){
            $('#play ul>li:not(:last)').css("marginRight","10px");
            $("#play ul>li:last").css("background","#f0f0f0");
            $("ol li>span:first,ul>li:not(:last)>span").css("background","#f0a30f");
            $("#play ul>li:last li>span:not(:first)").css("background","#a4a3a3");
            $("ol li").mouseover(function (){
                $(this).find("p").show();
            })
            $("ol li").mouseout(function (){
                $(this).find("p").hide();
            })
            $("#play ul>li:last li:lt(5)").css({
                background:"url('./images/orange.jpg') no-repeat right -3px"
            })
            $("#play ul>li:last li:gt(4),ul>li:last li:eq(1)").css({
                background:"url('./images/green.jpg') no-repeat right -3px"
            })
        })

最后的效果：