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";
}
记录每一个前端小案例!!!