我正在尝试了解如何构建类似于此页面的内容 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/