Link 在 css 中使用 :after 属性后消失

Question

我目前正在尝试加快网站的加载时间。当我接手这个项目时，有翻转图像可以使图像变亮，稍微表示你已经超过 'category'。我知道你可以在 css 中做到这一点，而不必使用两张完全相同的图像（第二张稍微亮一点。）我使用 :after 属性添加白色背景带有轻微不透明度的 z-index 来模仿这个想法。在以前的主页中，这些 'category images' 是可点击的，但在实施 :after 伪元素后，图像周围的 link 消失了。

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

.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>

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

Answer 1

那是因为div的伪元素覆盖了link。你可以使用锚的伪元素，这样你就可以有一个可点击的覆盖。

.new-hide-on-mobile {
  display: block;
  position: relative;
}

.new-hide-on-mobile a: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>

Answer 2

您可以使用 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。

Link 在 css 中使用 :after 属性后消失

Link disappears after use of :after property in css

html

css

pseudo-element

Link 在 css 中使用 :after 属性 后消失

Link disappears after use of :after property in css

html

css

pseudo-element

Link 在 css 中使用 :after 属性后消失