:: before伪元素时，锚元素不起作用

Question

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

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

我怎样才能解决这个问题？

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

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

Answer 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