html+css+js实现购物车(鼠标移入显示对话框)

1，主要通过js来改变display来实现
2，效果图

3.html部分

<section id="shopping">
    <div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div>
    <div id="cartList">
        <h2>最新加入的商品</h2>
        <ul>
            <li><img src="images/makeup.jpg"></li>
            <li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
            <li>¥558.00×1<br/>删除</li>
        </ul>
        <div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>
    </div>
</section>

2.css部分

*{margin: 0;padding: 0; font-family: "Arial", "微软雅黑"; font-size: 12px; line-height: 25px;}
ul,li{list-style: none;}
#shopping{margin: 20px auto 0 auto; width: 320px;
}
#cart{
    background: #f9f9f9 url("../images/cart.png") 20px 6px no-repeat;
    border: solid 1px #dcdcdc;
    float: right;
    width: 100px;
    height: 28px;
    padding-left: 45px;
    line-height: 28px;
    position: relative;
    cursor: pointer;
}
#cart span{
    position: absolute;
    color: #fff;
    background: #dc1742;
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    top:-5px;
    right: 20px;
    font-size: 8px;
    line-height: 15px;
    text-align: center;
}
#cartList{width: 310px; float: right; border: solid 1px #dcdcdc; display: none;}
#cartList h2{border-bottom: 1px dashed #cccccc; font-size: 14px; padding-left: 10px;}
#cartList li{float: left;}
#cartList li:nth-of-type(1){width: 65px; text-align: center;}
#cartList li:nth-of-type(2){width: 155px;}
#cartList li:nth-of-type(3){text-align: center; width: 85px;}
#cartList .footer{clear: both; height: 35px; line-height: 35px; background: #f5f5f5; padding:0  5px;}
#cartList .footer span{padding: 0 12px;}
#cartList .footer span:nth-of-type(2){
    color: #fff;
    background: #dc1742;
    display: block;
    height: 25px;
    border-radius: 6px;
    float: right;
    text-align: center;
    font-weight: bold;
    margin-top: 5px;
}

#shopping .cartOver{
    background-color: #ffffff;
    z-index: 100;
    border-bottom: none;
}
#shopping .cartListOver{
    display:block;
    position:relative;
    top:-1px;
}
#shopping .cartOut{
    background-color:#f9f9f9;
    border-bottom:solid 1px #dcdcdc;
}
#shopping .cartListOut{
    display:none;
}

3.js部分

 function over(){
     document.getElementById("cart").className="cartOver";
     document.getElementById("cartList").className="cartListOver";
        //alert(document.getElementById("cartList").display);
        //alert(document.getElementById("cartList").currentStyle.display);  //使用currentStyle获取属性值
        /*使用getComputedStyle获取属性值
        var cartList=document.getElementById("cartList");
        alert(document.defaultView.getComputedStyle(cartList,null).display);*/
     }
     function out(){
     document.getElementById("cart").className="cartOut";
     document.getElementById("cartList").className="cartListOut";
     }

记录每一个前端小案例！！！