Question

是否可以像这样使用标记，还可以在悬停时使用背景重叠？

background-color: #333

我尝试在.gallery-icon上悬停Check.py，但只出现像border-bottom这样的内容？

source code

Answer 1

您需要了解您的标记工作原理。您的图像将显示在所有内容之上，当您在.gallery-icon上放置背景颜色时，背景颜色将位于图像下方，并且由于锚链接没有宽度和高度，因此只需要一点点一点点，这就是它显示边界底部的原因。

要在悬停时创建背景叠加层，您需要将其置于图像顶部。

使用伪元素创建背景叠加层：

&:hover .gallery-icon {
  &::before {
    content: '';
    background-color: #333; 
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.2;
  }
}

伪元素具有绝对位置，因此它将显示在图像的顶部。 top，left，right和bottom 0告诉伪元素将其自身拉伸为高和父元素一样宽。

希望这有帮助。

Answer 2

你肯定是在正确的轨道上。由于您使用:after元素作为图标，因此您应该保留该元素，因为它已经定位并定义了自己的宽度+高度（基于图标）。

:after选择器正确定位的原因是因为它不依赖于其父容器维度。你只能从顶部和左边看它是绝对的，这很好。但是它不知道应该有多高，因为它的父级没有定义的高度！如果使用绝对定位，则需要定义父容器维度，以便子项知道其边界的位置。

首先，.gallery-icon已经是一个块元素，所以你不需要定义它的宽度（它本质上是100％），只是高度：

 .gallery-icon {
    position: relative;
    height: 100%;
 }

其次，您应该使用:before元素来定义背景，这样您就不必弄乱:after图标：

 &:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #333;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
 }

现在，您只需要在悬停时添加不透明度变化！

 &:hover {
    .gallery-icon {
       &:before {
          opacity: .5;
       }
       &:after {
          opacity: 0.6;
       }
    }

希望有所帮助，这是一个与您的原始代码分开的代码：http://codepen.io/anon/pen/JRWqxX

编辑：我还注意到您的img标记导致它低于容器的可视底部，快速修复就是添加：

  .gallery-icon {
     img {
        display: block;
     }

Answer 3

我试过一点点简化代码。我希望这是你试图实现的目标。

诀窍是将a作为独立元素放置到img。

<figure class="gallery-item">
    <a href="www.google.com"></a>
    <img src="http://placehold.it/300x300">
</figure>

http://codepen.io/anon/pen/LRWoaR

Answer 4

图像（http://placehold.it/300x300）具有纯色背景色，没有？

这会阻止任何事情发生。

背景覆盖在悬停上

4 个答案: