1
如何做响应式悬停?响应式图像响应式悬停
这是很好的悬停例子,它非常适合我的屏幕尺寸,这是不好的不响应悬停例如
这是我的代码
HTML
<div class="product-img-list">
<%= link_to product_path(product), class: 'product_link' do %>
<%= image_tag(product.image_url, class: "img-responsive", size: "300x250") %>
<% end %>
<span class="product-img-text"><span>code</span></span>
</div>
CSS
span.product-img-text {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 80px;
left: 15px;
position: absolute;
top: 230px;
width: 291px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.product-img-list:hover span.product-img-text {
opacity: 1;
}
span.product-img-text span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.img-responsive {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.product-img-list.img-responsive {
display: inline-block;
margin: 0 1em 1em 0;
position: relative;
}
谢谢大家帮忙