当鼠标悬停在图像上时显示按钮(rails image_tag)

这就是我要做的:显示图像从我的数据库和显示一个覆盖下载按钮(链接到一个文件的url)在图像的顶部，当你把鼠标悬停在它。见图示:http://cl.ly/image/2T200Z451K0v

我用铁轨和回形针。下面是我的视图:

<%= image_tag pin.image(:medium) %>
<%= link_to "download", pin.download_link, class: "btn btn-large btn-primary"%>

显示图片和下面的下载按钮。

我已经尝试了很多事情，我已经设法使按钮出现只有当我悬停在图像上，但按钮总是停留在图像下面。我尝试使用position:relative，但我想它会工作，如果图像是一个div和按钮在div内，我不知道如何做到这一点。

使用HTML和CSS很容易做到这一点。下面是一个例子:

http://codepen.io/anon/pen/Hwfnz

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {width: 300px; height: 240px;}
a {display: table; width: 300px; height: 240px; vertical-align: middle; text-align: center; position: relative;}
span {display: none;}
a:hover span {width: 300px; height: 240px; line-height: 240px; position: absolute; left: 0; top: 0; display: block; text-align: center; background: rgba(67,81,96,0.7); }
span b {font-size: 1.5em; font-weight: normal; padding: 8px 12px; border-radius: 5px; background: #6bbe70; color: #fff; font-family: sans-serif;}
a:hover span b:hover {background: #000;}
img {background: #e7e7e7; border: none; vertical-align: bottom;}
</style>
</head>
<body>
<div>
    <a href=""><img src="http://pageaffairs.com/sp/so-16390475.jpg" width="300" height="240"> <span><b>download</b></span></a>
</div>
</body>
</html>

以下是我按照ralph的建议最后所做的html:

<div class="pin_image">
  <a href=<%= pin.download_link %>>
    <%= image_tag pin.image(:medium) %>
  <span><b>download</b></span>
  </a> 
</div>

css:

.pin_image {
a {
    display: table; 
    vertical-align: middle; 
    text-align: center; 
    position: relative;
}
span {
    display: none;
}
a:hover {
    span {
    display: block; 
    position: absolute;
    vertical-align: middle;
    text-align: center; 
    top:45%;
    width: 100%;
    }
}
span b {
    padding: 10px 20px;
    font-size: 22px;
    text-shadow: none;
    font-weight: normal;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background:#2DC76E;
    color: white;   
}
a:hover span b:hover {
    background: #25A65B;
}
}

相关内容

最新更新

热门标签：