特效描述:利用CSS3实现 鼠标经过 显示购物车 按钮特效,利用CSS3实现鼠标经过显示购物车按钮特效
代码结构
1. 引入CSS
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" /> <link href="css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/demo.css">
2. HTML代码
<div class="demo"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="product-grid"> <div class="product-image"> <a href="#"> <img class="pic-1" src="images/img-1.jpg"> </a> </div> <div class="product-content"> <h3 class="title"><a href="#">Men's Shirt</a></h3> <div class="price">$11.00 <span>$14.00</span> </div> </div> <ul class="social"> <li><a href="" data-tip="Quick View"><i class="fa fa-search"></i></a></li> <li><a href="" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li> <li><a href="" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="product-grid"> <div class="product-image"> <a href="#"> <img class="pic-1" src="images/img-2.jpg"> </a> </div> <div class="product-content"> <h3 class="title"><a href="#">Women's Red Top</a></h3> <div class="price">$8.00 <span>$12.00</span> </div> </div> <ul class="social"> <li><a href="" data-tip="Quick View"><i class="fa fa-search"></i></a></li> <li><a href="" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li> <li><a href="" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="product-grid"> <div class="product-image"> <a href="#"> <img class="pic-1" src="images/img-3.jpg"> </a> </div> <div class="product-content"> <h3 class="title"><a href="#">Women's Shirt</a></h3> <div class="price">$10.00 <span>$12.00</span> </div> </div> <ul class="social"> <li><a href="" data-tip="Quick View"><i class="fa fa-search"></i></a></li> <li><a href="" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li> <li><a href="" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="product-grid"> <div class="product-image"> <a href="#"> <img class="pic-1" src="images/img-4.jpg"> </a> </div> <div class="product-content"> <h3 class="title"><a href="#">Men's Tshirt</a></h3> <div class="price">$8.00 <span>$11.00</span> </div> </div> <ul class="social"> <li><a href="" data-tip="Quick View"><i class="fa fa-search"></i></a></li> <li><a href="" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li> <li><a href="" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li> </ul> </div> </div> </div> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div>