javascript - 在每 2x2 列和行的 Bootstrap 网格布局上应用悬停框

Question

我正在尝试创建一个动态网格系统，它将在每个 2x2 网格布局上应用一个悬停框。

我这里有一个 fiddle http://jsfiddle.net/rjayako/bfwa0tte/

基本上左边的前两个和第二行左边的前两个应该共享同一个叠加框。第一行第三和第四以及第二行第三和第四应该共享相同的叠加层。

我在这里创建了一个我正在谈论的模型。

目前我的覆盖框看起来像这样

.hover-box {
  position: absolute;
  width: 430px;
  height: 200px;
  background-color: blue;
  padding-right: 20px;
  padding-left: 0px;
  text-size: 30px;
  text-align: center;
  color: #fff;
  padding-top: 80px;
}

不幸的是，这样做会将所有框覆盖到一个位置。

我在这方面已经有一段时间了，但我没有想法。对此的任何帮助将不胜感激。

Answer 1

这是一个非常简单的示例，说明如何仅使用 HTML 和 CSS 完成类似的事情。基本上我所做的是将内容分成 2x2“外部”网格，其中每个框都有一个 2x2“内部”网格。然后，只需将元素绝对定位在“内部”网格内并将其显示在 :hover 上即可。

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

.category {
  width: 50%;
  float: left;
  border: 1px solid #00f;
  position: relative;
}

.category:hover .hover-dingus {
  display: block;
}

.category .hover-dingus {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  font-size: 39px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  padding-top: 27%;
}

.category ul {
  list-style: none;
}

.category li {
  float: left;
  width: 50%;
  height: 200px;
  border: 1px solid #f00;
}

<div class="category">
  <div class="hover-dingus">Music!</div>
  <ul>
    <li>Rock</li>
    <li>Alternative</li>
    <li>Blues</li>
    <li>Jazz</li>
  </ul>
</div>
<div class="category">
  <div class="hover-dingus">Music!</div>
  <ul>
    <li>Rock</li>
    <li>Alternative</li>
    <li>Blues</li>
    <li>Jazz</li>
  </ul>
</div>
<div class="category">
  <div class="hover-dingus">Music!</div>
  <ul>
    <li>Rock</li>
    <li>Alternative</li>
    <li>Blues</li>
    <li>Jazz</li>
  </ul>
</div>
<div class="category">
  <div class="hover-dingus">Music!</div>
  <ul>
    <li>Rock</li>
    <li>Alternative</li>
    <li>Blues</li>
    <li>Jazz</li>
  </ul>
</div>