當鼠標懸停在圖像上時顯示按鈕（rails image_tag）

這是我正在做的事情：顯示來自我的數據庫的圖像並在懸停時顯示圖像頂部的下載按鈕（鏈接到文件的url）的覆蓋圖你的鼠標在它上面。請參閱此處的插圖：http://cl.ly/image/2T200Z451K0v 當鼠標懸停在圖像上時顯示按鈕（rails image_tag）

我正在使用導軌和回形針。這裏基本上是我有我的觀點：

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

其顯示圖像和下面的下載按鈕。

我已經嘗試了很多東西，我設法讓按鈕只出現在鼠標懸停在圖像上，但按鈕始終停留在圖像下方。我嘗試使用位置：相對，但我想它會工作，如果圖像是一個div和按鈕是在該div內，我不知道該怎麼做。

來源

2013-05-06 Max

用HTML和CSS做這件事很簡單。這裏有一個例子：

<!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>

來源

2013-05-06 01:20:38

的事情是，我在html.erb文件中，我沒有使用和 htm l標籤，我使用ruby代碼<％= image_tag％>和<％= link_to％>來加載每個圖像並從db下載鏈接。 – Max 2013-05-06 09:11:18

這是一個將出現在網頁上的下載按鈕嗎？如果是這樣，您將需要使用HTML元素。無論您在後端使用什麼，重要的是提供給瀏覽器的代碼。什麼是您的實際生成的HTML？ – 2013-05-06 09:24:43

是的，它是一個下載按鈕，將出現在網頁中，所以你是對的，生成的HTML將有和標記，它看起來與您所寫的內容類似。但我試圖找出如何在我的視圖中使用<%=link_to%>和<％= image_tag％>在rails應用程序中生成此視圖。我想我應該試試標籤而不是<%=link_to%>。 – Max 2013-05-06 14:38:10

這裏就是我終於做到了，下面拉爾夫的建議 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; 
} 
}

來源

2013-05-06 16:00:55 Max

當鼠標懸停在圖像上時顯示按鈕（rails image_tag）

回答

相關問題