::before伪元素时锚元素不起作用答案

【问题标题】：anchor element not working when ::before pseudo element::before伪元素时锚元素不起作用
【发布时间】：2015-03-13 12:33:45
【问题描述】：

我在父 ::before 上应用了一些样式，并且里面的锚元素不再起作用。

似乎有些东西覆盖了锚元素的默认行为，但我不知道是什么。

我该如何解决这个问题？

.ugallery_item::before {
content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition:all 0.8s;
  opacity:0;
  background:url("http://placehold.it/14x14") #eabe24 no-repeat center center;
}
.ugallery_item:hover::before {
  opacity:0.8;
}

<div class="ugallery_item ugallery_item_image  shuffle-item filtered" style="position: absolute; width: 140px; top: 0px; left: 0px; opacity: 1;" rel="706" data-groups="[&quot;label_0&quot;]">
    <a class="ugallery_link ugallery_lightbox_link" href="http://placehold.it/300x400" title="">
      <img src="http://placehold.it/150x150" alt="" class="ugallery-image" style=" margin-left:0px;  margin-top:0px;width:140px; height:140px">
        <div class="ugallery_lb_text" rel="706"></div>

    </a>
</div>

【问题讨论】：

您已经将伪元素置于链接**..所以鼠标自然无法点击它。你想做什么？
true，如果您不希望 :before 元素在悬停时发生某些事情，只需将 pointer-events: none 添加到它..
@John 这些是冒号 (:)，而不是分号 (;)。

标签： html css anchor pseudo-element

【解决方案1】：

您已经将伪元素绝对定位在链接上..所以鼠标自然无法点击它。

您将伪元素移动到实际链接。

.ugallery_item {
  position: absolute;
  width: 140px;
  top: 0px;
  left: 0px;
  opacity: 1;
}
.ugallery_lightbox_link {
  display: block;
  position: relative;
}
.ugallery_lightbox_link:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.8s;
  opacity: 0;
  background: url("http://placehold.it/14x14") #eabe24 no-repeat center center;
}
.ugallery_lightbox_link:before {
  opacity: 0.8;
}

<div class="ugallery_item ugallery_item_image  shuffle-item filtered" rel="706" data-groups="">
  <a class="ugallery_link ugallery_lightbox_link" href="http://placehold.it/300x400" title="">
    <img src="http://placehold.it/150x150" alt="" class="ugallery-image" style=" margin-left:0px;  margin-top:0px;width:140px; height:140px" />

    <div class="ugallery_lb_text" rel="706"></div>

  </a>

</div>

【讨论】：

【解决方案2】：

您想要它，以便您可以单击 a 并正确设置不透明度？

为什么不只使用 a-tag 本身，而不是容器？

.ugallery_item a::before {
content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition:all 0.8s;
  opacity:0;
  background:url("http://placehold.it/14x14") #eabe24 no-repeat center center;
}
.ugallery_item a:hover::before {
  opacity:0.8;
}

JSFiddle

【讨论】：