html - 使用 :after property in css 后链接消失

Question

我目前正在尝试加快网站的加载时间。当我接手这个元素时，有翻转图像可以使图像变亮，略微表示您处于“类别”之上。我知道你可以在 css 中做到这一点，而不必使用两个完全相同的图像(第二个只是稍微亮一点。)模仿这个想法。 在以前的主页中，这些“类别图像”是可点击的，但在实现 :after 伪元素后，图像周围的链接消失了。

这是我的布局的一小段 4x4 Grid snippet 这是其中一个 block 的代码

.new-hide-on-mobile {
    display: block;
    position: relative;
}
.new-hide-on-mobile:hover:after {
    content: '';
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: white;
    opacity: 0.2;
    margin: 0 auto;
}

<div class="new-hide-on-mobile">
<a href="https://www.somatechnology.com/AnesthesiaMachines.aspx"><img itemprop="image" src="https://somatechnology.com/images/images_for_home/Rollovers/anesthesia_machine_cat.jpg" alt="Anesthesia Machines offered by Soma Technology, Inc." width="152" height="152"></a><br></div>

我知道内容有问题:'';属性(property)，但如果我把它拿出来，它不会产生我正在寻找的翻转效果。我这样做是不是错了？我应该做点别的吗？

Answer 1

您可以使用 Brightness Filter .
所有主流浏览器都支持它，IE 除外。

---

HTML

<a href="https://www.somatechnology.com/AnesthesiaMachines.aspx">
  <img itemprop="image" src="https://somatechnology.com/images/images_for_home/Rollovers/anesthesia_machine_cat.jpg" alt="Anesthesia Machines offered by Soma Technology, Inc." width="152" height="152">
</a>

CSS

a:hover img {
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
}

这是一个 jsFiddle demo .