jquery - 悬停效果没有完全覆盖我的六边形网格中的元素

Question

基于此very good response ，我正在为图像试验响应式 CSS 六 Angular 网格。

我安装了与 on Github except 相同的 CSS一方面:我删除了允许六边形行超过 3 行的媒体查询。

就是说，当网格呈现时，六边形出现并且看起来很棒，但是当我将鼠标悬停在它们上面时，六边形仅部分填充，如下所示:https://jsfiddle.net/p9810xdj/

我尝试检查填充和边距，我认为这可能会导致两半之间出现空白，但没有成功。悬停效果无法正常工作的任何线索:

/*** HOVER EFFECT  **********************************************************************/
.hexIn:hover h1, .hexIn:focus h1,
.hexIn:hover p, .hexIn:focus p{
    -webkit-transform:translateY(0%) translatez(-1px);
        -ms-transform:translateY(0%) translatez(-1px);
            transform:translateY(0%) translatez(-1px);
}

Answer 1

我想你在检查边距时漏掉了什么!

将此添加到您的 CSS:

.hex h1, .hex p {
  margin: 0;
}

空白处消失了。