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

Question

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

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

Answer 1

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

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

所有这些用途 :hover

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

display: inline-block

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