-2
對於我的生活，我無法弄清楚如何在圖像上添加一個「立即購買」按鈕疊加，並保持響應...按鈕疊加懸停，而不是懸停
我我正在使用檸檬水框架，並希望保持這一點而不是引導。
關於如何糾正代碼的任何想法？ 下面是一個檸檬水框架的例子。
任何建議將非常感激。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: 0 auto;
max-width: 1140px;
}
[class*=bit-] {
float: left;
padding: .3em;
}
/* Grids */
.box {
background: #00aabe;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 700;
text-align: center;
padding: 20px 0;
}
.box-2 {
background: #00aabe;
}
.bit-1 {
width: 100%;
}
.bit-2 {
width: 50%;
}
.bit-3 {
width: 33.33333%;
}
.bit-4 {
width: 25%;
}
.bit-5 {
width: 20%;
}
.bit-6 {
width: 16.66667%;
}
.bit-7 {
width: 14.28571%;
}
.bit-8 {
width: 12.5%;
}
.bit-9 {
width: 11.11111%;
}
.bit-10 {
width: 10%;
}
.bit-11 {
width: 9.09091%;
}
.bit-12 {
width: 8.33333%;
}
.bit-25 {
width: 25%;
}
.bit-40 {
width: 40%;
}
.bit-60 {
width: 60%;
}
.bit-75 {
width: 75%;
}
.bit-35 {
width: 35%;
}
.bit-65 {
width: 65%;
}
/* Responsive Goodness */
/* Defaults above are set Desktop resolution or higher */
/* Laptop */
@media (min-width: 50em) and (max-width: 68.75em) {
.bit-2,
.bit-7,
.bit-35,
.bit-65 {
width: 100%;
}
.bit-10,
.bit-12,
.bit-4,
.bit-8 {
width: 50%;
}
}
/* Tablet */
@media (min-width: 30em) and (max-width: 50em) {
.bit-10,
.bit-12,
.bit-4,
.bit-6,
.bit-8 {
width: 50%;
}
.bit-1,
.bit-11,
.bit-2,
.bit-3,
.bit-5,
.bit-7,
.bit-9 {
width: 100%;
}
}
/* Mobile */
@media (max-width: 30em) {
.bit-1,
.bit-10,
.bit-11,
.bit-12,
.bit-2,
.bit-3,
.bit-4,
.bit-5,
.bit-6,
.bit-7,
.bit-8,
.bit-9 {
width: 100%;
}
}<div class="container">
<div class="bit-3">
<img src="http://i.imgur.com/K8B2N1H.jpg" width="100%">
</div>
<div class="bit-3">
<img src="http://i.imgur.com/K8B2N1H.jpg" width="100%">
</div>
<div class="bit-3">
<img src="http://i.imgur.com/K8B2N1H.jpg" width="100%">
</div>
</div>
是的，但你可以做一個版本，在那裏它不是一個懸停，並就在那裏？我希望它會浮在圖像的中心，而不是陷入底部。 – adambwhitten
@adambwhitten：檢查更新的答案，**現在購物**將浮在中心！ – Pugazh
對不起，讓我複製這個，所以我有非懸停版本。你可以再次拋出懸停版本嗎？ – adambwhitten