jquery - 悬停在单元格上时显示的 4x4 网格

标签 jquery html css

我正在尝试了解如何构建类似于此页面的内容 https://addons.heroku.com/ ,特别是 4x4 的“数据存储”网格,当您将鼠标悬停在每个图标上时它会显示描述,然后在您单击它时重定向到另一个页面。我不想像他们那样使用图像,而是只想有一个带有一些文本的彩色单元格(悬停时会显示更详细的文本)。查看该页面上的源代码并没有帮助我理解发生了什么,这超出了我的理解水平。

有人可以描述如何构建我描述的内容吗?我知道这是一个基本水平的问题,但这就是我发现自己的水平!

最佳答案

使用 CSS 隐藏和显示您想要的元素。您可以使用转换将一个 div 滑入和滑出另一个。

我在这里开始了一个例子:http://jsfiddle.net/443ub/1/

所有这些用途 :hover

为了得到<div>要水平对齐,您需要将显示模式指定为内联 block 。

display: inline-block

您可以在此处的“方形”类上看到它的使用:http://jsfiddle.net/443ub/3/

关于jquery - 悬停在单元格上时显示的 4x4 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21532806/

相关文章:

javascript - 无法单击我的 'content' div 中的元素

html - 如何限制我在文本上放置的背景颜色

css - 图片在幻灯片 div 中对齐

html - 如何在 <td> 表格单元格中打断长文本?

html - 用户选择时 <select> 标签之间的间隙

javascript - ExtJS Ajax 请求超时对 Internet Explorer 没有影响

jquery - Rails 通过 jQuery Draggable Droppable 和 hide_field_tag 更新 has_many

jquery - Backbone.js 事件绑定(bind)。就像 Jquery 中的 "delegate"一样?

带有输入字段条件的 JavaScript IF 语句

c# - DevExpress 元素创建后如何更改主题?