Question

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

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

Answer 1

使用CSS隐藏和显示所需的元素。您可以使用过渡来滑入一个div和另一个div。

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

所有这一切都在使用 :hover

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

display: inline-block

你可以在这里的“square”类中看到这个：http://jsfiddle.net/443ub/3/

Answer 2

如果你想要它是基本的（没有花哨的文本动画），你可以使用CSS。

这段代码可以给你一些想法。 HTML：

<div id="box">
  <div id="title">Title</div>
  <div id="description">Some more text</div>
</div>

CSS：

#box{
  //set height/width and other stuff here
}

#title{
  display:block;
  //other css for font size/colour etc...
}

#description{
  display:none;
  //other css for font size/colour etc...
}

#box:hover #title{
  display:none;
}

#box:hover #description{
  display:block;
}

Answer 3

这已经完成了CSS和Transitions。在某些情况下，您可以设置不透明度和可见性等属性（以及更多内容）。

如果是您显示的页面，则会有一个项目列表。

就像这样：

<ul>
<li><span>Here is some text</span>
<span class="description">I'am hidden as default and show on Hover</span></li>
<li><span>Here is some more text</span>
<span class="description">Hi</span></li>
</ul>

只要将鼠标悬停在列表项上，您现在可以定义一些CSS以使默认隐藏文本可见。像这样：

ul li
{
    display: block;
    width: 150px;
    height: 150px;
}
ul li .description
{
   visibility: hidden;
   opacity: 0;
   margin-top: 30px;
   transition-property: all;    
   transition-duration: 1s;
}

ul li:Hover .description
{
   visibility: visible;
   opacity: 1;
   margin-top: 0px;
    background-color: blue;
}

以下是一个例子：

http://jsfiddle.net/NicoO/42VQa/

您可以使用transition-property选项定义要动画的内容。

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

3 个答案: