jQuery仿京东鼠标悬浮购物车效果

收藏

分享下京东的头部购物车代码，悬浮上去显示商品，鼠标离开后隐藏商品列表

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

<div class="dorpdown " id="settleup-2014"> 
    <div class="cw-icon"> 
        <i class="ci-left"> 
        </i> 
        <i class="ci-right"> 
            &gt; 
        </i> 
        <i id="shopping-amount" class="ci-count"> 
            2 
        </i> 
        <a href="http://cart.jd.com/cart/cart.html" target="_blank"> 
            我的购物车 
        </a> 
    </div> 
    <div class="dorpdown-layer"> 
        <div class="spacer"> 
        </div> 
        <div id="settleup-content"> 
            <div class="smt"> 
                <h4 class="fl"> 
                    最新加入的商品 
                </h4> 
            </div> 
            <div class="smc"> 
                <ul id="mcart-sigle"> 
                    <li> 
                        <div class="p-img fl"> 
                            <a target="_blank" href="http://item.jd.com/1006559999.html"> 
                                <img width="50" height="50" alt="" src="http://img14.360buyimg.com/n5/jfs/t1192/159/315731728/253428/36a3148d/55164e07Na21247a1.jpg" 
                                /> 
                            </a> 
                        </div> 
                        <div class="p-name fl"> 
                            <a target="_blank" title="天堂伞超大雨伞防紫外线太阳伞商务晴雨伞3311E碰 藏青色" href="http://item.jd.com/1006559999.html"> 
                                天堂伞超大雨伞防紫外线太阳伞商务晴雨伞3311E碰 藏青色 
                            </a> 
                        </div> 
                        <div class="p-detail fr ar"> 
                            <span class="p-price"> 
                                <strong> 
                                    ￥29.00 
                                </strong> 
                                &times;1 
                            </span> 
                            <br /> 
                            <a href="javascript:void(0)" data-type="RemoveProduct" data-id="1006559999" 
                            class="delete"> 
                                删除 
                            </a> 
                        </div> 
                    </li> 
                </ul> 
                <ul id="mcart-gift"> 
                </ul> 
                <ul id="mcart-mj"> 
                    <li class="dt"> 
                        <div class="fl"> 
                            <span class="hl-green"> 
                                满减 
                            </span> 
                            购满1000元，即可享受满减优惠 
                        </div> 
                        <div class="fr"> 
                            <em> 
                                小计：￥99.00 
                            </em> 
                        </div> 
                        <div class="clr"> 
                        </div> 
                    </li> 
                    <li> 
                        <div class="p-img fl"> 
                            <a target="_blank" href="http://item.jd.com/1337711955.html"> 
                                <img width="50" height="50" alt="" src="http://img10.360buyimg.com/n5/jfs/t664/53/839779274/506219/2ad457cc/54914559N07817662.jpg" 
                                /> 
                            </a> 
                        </div> 
                        <div class="p-name fl"> 
                            <span> 
                            </span> 
                            <a target="_blank" title="卡农欧式护眼台灯 婚庆创意田园床头卧室装饰灯 抢完涨价" href="http://item.jd.com/1337711955.html"> 
                                卡农欧式护眼台灯 婚庆创意田园床头卧室装饰灯 抢完涨价 
                            </a> 
                        </div> 
                        <div class="p-detail fr ar"> 
                            <span class="p-price"> 
                                <strong> 
                                    ￥99.00 
                                </strong> 
                                &times;1 
                            </span> 
                            <br /> 
                            <span class="hl-orange"> 
                                送京豆： 
                                <em> 
                                    5 
                                </em> 
                            </span> 
                            <br /> 
                            <a href="#delete" class="delete"> 
                                删除 
                            </a> 
                        </div> 
                    </li> 
                </ul> 
            </div> 
            <div class="smb ar"> 
                <div class="p-total"> 
                    共 
                    <b> 
                        2 
                    </b> 
                    件商品　共计 
                    <strong> 
                        ￥ 128.00 
                    </strong> 
                </div> 
                <a id="btn-payforgoods" title="去购物车" href="http://cart.jd.com/cart/cart.html?r=1435635737388"> 
                    去购物车 
                </a> 
            </div> 
        </div> 
    </div> 
</div>

jQuery

$(function() { 
    $('.dorpdown').hover(function() { 
        $(this).addClass("hover"); 
    }, 
    function() { 
        $(this).removeClass("hover"); 
    }) 
})