个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
这是我正在尝试做的事情:显示来 self 的数据库的图像，并在将鼠标悬停在图像上时在图像顶部显示带有下载按钮(链接到文件的 URL)的叠加层。参见此处的插图:http://cl.ly/image/2T200Z451K0v
我正在使用 rails 和回形针。这基本上是我的看法:
<%= 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>
关于html - 将鼠标悬停在图像上时显示按钮(rails image_tag)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16390475/
24
4
0
当您想在表单中显示照片时，一致认为应该这样做: ActiveAdmin.register Foobar do form :html => {:multipart => true} do |f|
我在 Rails 中使用 image_tag。在本地，它解析为/assets/image.img。在 Heroku 上，它解析为/images/image.img。 我关闭了 Assets 管道(这个
图片标签: "style_image") %> CSS: .style_image { border-right: 1px solid #000; } 错误: C:/Sites/AcuSimon
在尝试让它工作的第三天，我想知道是否有涉及 image_tag 的特殊规则以及它如何在 Rails 上下文中工作。我的rails html标签在layout目录下的application.html.e
请问有没有办法把所有image_tag图片标签压缩成一个？我在标题中使用了 Nivo slider ，我不想在我的布局页面中写入所有图像标签，那么有什么解决方案吗？ 谢谢。 最佳答案 将它们放在一个子
我正在尝试创建一个全屏旋转木马，但即使我放置“align: center”，我的所有图片都显示在屏幕的左上角 这是我的 html... "align: center;") %>
这是我正在尝试做的事情:显示来 self 的数据库的图像，并在将鼠标悬停在图像上时在图像顶部显示带有下载按钮(链接到文件的 URL)的叠加层。参见此处的插图:http://cl.ly/image/2T
问题 我有一个运行三元运算的辅助方法。结果操作数都是 image_tag 方法。当我从 View 中调用此助手时，“:size”选项不会转换为 html 中的高度和宽度标签。当我将任一 image_t
创建 image_tag(通过 rails 助手)的最佳方法是什么，如果默认图像被破坏而不是文本，则显示另一个图像。它不必支持递归。我只有一张默认图片，如果链接断开，我想使用它。 最佳答案 您可以通过
ERB 中的这段代码只显示一张图片。我认为这将是一个简单的修复，但我已经搜索谷歌试图找到它。也许我只是忘记了什么 最佳答案 打印其中代码的结果，而不是全部。如果你想显示两张图片，你可以这样做 或
我有一个 Rails 4.2.0 应用程序，它使用 image_tag 来显示图像，例如: = image_tag 'android_green_300_100px' (它也使用 slim) 在开发模
在一个 Rails 项目中，我使用 image_tag 来生成我的图像 html 元素。 "test image") %> 正在产生 这在我的整个 Rails 项目中都在发生。 是否有其他人设置的
我想测试以下辅助模块功能: module UploadsHelper def custom_img_tag(upload, width, height, id) if width > U
我有一个链接的 image_tag，我想在鼠标悬停时更改图像。我认为以下方法可行，但图像未在鼠标悬停时切换: "newStep", :onmouseover => "new_step_highlig
我有一个 rails 3.x 应用程序，它具有模型类，这些模型类将内容返回到要在页面上呈现的 View 部分。该模型负责处理内容，并将其返回给盲目地将其添加到页面的 View 。换句话说， View
显然this commit添加一个配置选项来定义 image_tag :loading 选项的默认值。因此，通过设置 config.action_view.image_loading，应用程序可以选择
我正在努力实现以下目标: $(".share-icon").html(""); 这显然不起作用，但我如何在 JS 响应中使用 image_tag？ 谢谢 最佳答案 尝试使用escape_javascr
我正在使用亚马逊的 S3 进行图像存储，并配置了载波和雾。这些图像似乎可以正确存储，但是当我有一个“肖像”图像(宽度小于高度)时，它没有正确显示，而是在其侧面旋转图像。 任何指向正确方向的指示都将不胜
显然this commit添加一个配置选项来定义 image_tag :loading 选项的默认值。因此，通过设置 config.action_view.image_loading，应用程序可以选择
在此元素中，用户可以将图片上传到帖子中。此图像应以固定高度和 100% 宽度显示。 因此必须根据上传的图片大小裁剪图片。 我想像这里一样使用纯 CSS 解决方案 http://jsfiddle.net
我是一名优秀的程序员,十分优秀！