html - 悬停时背景叠加

Question

是否可以有这样的标记，但也可以在悬停时叠加背景？

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

我尝试将 background-color: #333 放在 .gallery-icon 上悬停，但只出现 border-bottom 之类的东西？

http://codepen.io/filaret/pen/NRpVyr

Answer 1

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

:after 选择器正确定位自身的原因是因为它不依赖于其父容器尺寸。您只能从顶部和左侧将它作为绝对值，这很好。但它不知道自己应该多高，因为它的父级没有定义高度!如果使用绝对定位，则需要定义父容器尺寸，以便子容器知道其边界在哪里。

所以首先，.gallery-icon 已经是一个 block 元素，所以你不需要定义它的宽度(它本来就已经是 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;
       }
    }

希望对您有所帮助，这是从您的原始代码中 fork 出来的代码笔:http://codepen.io/anon/pen/JRWqxX

编辑:我还注意到您的 img 标签导致它低于容器的可视底部，一个快速修复方法是添加:

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