在每个2x2列和行上的引导网格布局上应用悬停框

Question

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

我在这里有一个小提琴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

您可以使用querySelectors和jQuery以及data属性。另一种方法是重新格式化HTML并将classes与:hover一起使用。我已在此jsfiddle中包含了这两个选项。下面的代码是jQuery选项

$('[data-hover-group]').each(function() {
  var group_num = this.dataset.hoverGroup;
  $(this).on('mouseover', function(e) {
    $('[data-hover-group="' + group_num + '"]').each(function() {
      console.log(this);
      this.dataset.hover = 'true';
    })
  })
  $(this).on('mouseout', function(e) {
    $('[data-hover-group="' + group_num + '"]').each(function() {
      console.log(this);
      this.dataset.hover = 'false';
    })
  })
})

这是通过叠加http://jsfiddle.net/stevenkaspar/fbtu384t/2/

实现的

Answer 2

这是一个非常简单的例子，说明如何使用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>