获取 :before :after 伪类来处理图像上的链接答案

【问题标题】：getting :before :after pseudo classes to work with links on images获取 :before :after 伪类来处理图像上的链接
【发布时间】：2017-04-02 14:38:28
【问题描述】：

我的页面上有多个图像，我希望它们有一个黑色的覆盖层（如不透明度为 0.6 的黑色矩形），悬停会消失。这是最简单的部分。

.item {
  position: relative;
  width: 200px;
  height: 200px;
}
.item img {
  width: 100%;
  vertical-align: top;
}
.item:after,
.item:before {
  position: absolute;
  opacity: 1;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
}
.item:after {
  content: '\A';
 width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.item:before {
  content: attr(data-content);
  width: 100%;
  color: #fff;
  z-index: 1;
  bottom: 1;
  padding: 34px 6px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.item:hover:after,
.item:hover:before {
  opacity: 0;
}

<div class="item" data-content="Image Title">
  <a href="http://www.google.com">
    <img src="http://placehold.it/180x267">
  </a>
</div>

<div class="item" data-content="Second Image Title">
  <a href="http://www.google.com">
    <img src="http://placehold.it/180x267">
  </a>
</div>

这里有一个 FIDDLE，覆盖在工作，但在移动设备上没有响应。

这是我的问题：我也希望将图像链接起来。这似乎与 :before :after 伪类不兼容。我试过替换

content: '\A';

与

{ content: ' [' attr(href) ']'; }

但没有运气。图像确实会变成链接，但它们不再具有叠加层。他们在移动设备上也没有响应我该如何解决这个问题？这是一个 FIDDLE，链接正常，但没有覆盖。

我怎样才能让一个带有覆盖层的图像在悬停时消失并变成一个链接但也是移动响应的？可能是一些 jquery？

【问题讨论】：

标签： jquery css image css-selectors hover

【解决方案1】：

您可以在伪元素中使用pointer-events: none;。

对于响应式图像，您可以添加以下属性：

max-width: 100%;
height: auto;
display: block;

注意：确保带有供应商前缀的属性始终位于无前缀的属性之前。

.item {
  position: relative;
  width: 200px;
  height: 200px;
  float: left;
  padding: 0px;
  margin-left: 20px;
}
.item img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
.item:after,
.item:before {
  position: absolute;
  opacity: 1;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  pointer-events: none;
}
.item:after {
  content: '\A';
 width: 100%;
  height: 300px;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.item:before {
  content: attr(data-content);
  width: 100%;
  color: #fff;
  z-index: 1;
  bottom: 1;
  padding: 34px;
  text-align: center;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.item:hover:after,
.item:hover:before {
  opacity: 0;
}

<div class="item" data-content="First image Title">
  <a href="http://www.google.com">
    <img src="http://placehold.it/180x267">
  </a>
</div>
<div class="item" data-content="Second Image Title">
  <a href="http://www.google.com">
    <img src="http://placehold.it/180x267">
  </a>
</div>

pointer-events property summary - 来源MDN。
pointer-events browser support - 来源我可以使用。

【讨论】：

这样链接就可以工作了！谢谢。我所说的响应式图片并不是我的图片本身。我知道如何让他们做出反应。但是，叠加层不会随图像缩放。即使你运行你的 sn-p，如果你调整浏览器的大小，覆盖也不会停留在图像上。
@jburnit 哦，我明白了，在我的浏览器中它总是合适的，但问题是您需要在叠加层中指定top: 0; left: 0; right: 0; bottom: 0;。这样您就可以从中删除width 和height，它将始终覆盖父元素。

【解决方案2】：

将:before 和:after 效果放在链接而不是父容器上怎么样？

https://jsfiddle.net/cLcmhuzo/1/

我不确定我是否理解关于使其具有移动响应性的部分。你试过什么？哪个部分不工作？似乎只需将宽度从固定像素大小更改为百分比就可以了。

【讨论】：