锚元素不工作时：在伪元素之前

我已对父代: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>

来源

2015-03-13 agis

你的伪元素绝对定位** **上的链接** ..所以自然鼠标不能一下就可以了。你想做什么？ – 2015-03-13 12:36:15

是真的，如果你不想在悬停前的before元素发生什么事情，只需简单地将'pointer-events：none'添加到它。 – 2015-03-13 12:40:39

你绝对定位伪元素在link..so自然鼠标不能一下就可以了。

您将伪元素移至实际链接。

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

来源

2015-03-13 12:42:00

你想要它，所以你可以点击和具有透明度是否正确？

为什么不只是使用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

来源

2015-03-13 12:42:08

锚元素不工作时：在伪元素之前

回答

相关问题