Question

现在我需要你的帮助来为客户创建这个“内容悬停元素” Concrete5网站..

到目前为止，这是我的网站：testi4.aada.fi

我正在处理这个悬停元素，它应该像这样工作：http://testi4.aada.fi/files/7514/1802/2403/kwh_hover.png

我不知道如何管理代码...

有这样的图像，当用户将鼠标放在它上面时，用户应该在该图像下获得带有内容的其他div ..

任何提示都非常受欢迎!!!

// Mika

Answer 1

简单的悬停效果，如果需要一些额外的动画，请使用jQuery。

.wrapper {
  width: 33%;
  float: left;
  box-sizing: border-box;
  border: 1px solid #ddd;
  position: relative;
}
.hover {
  display: none;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #ddd;
}
.wrapper:hover .hover {
  display: block;
}

<div class="wrapper">
  <img src="http://lorempixel.com/400/200/animals" />
  <div class="hover">
    some text here;
  </div>
</div>
<div class="wrapper">
  <img src="http://lorempixel.com/400/200/sports" />
  <div class="hover">
    some text here;
  </div>
</div>
<div class="wrapper">
  <img src="http://lorempixel.com/400/200/city" />
  <div class="hover">
    some text here;
  </div>
</div>

需要有关创建响应式内容悬停元素的提示

1 个答案: