Якорный элемент не работает, когда: перед псевдоэлементом

Question

Я применил некоторые стили на родительском :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>

Answer 1

Вы абсолютно позиционирован псевдо-элемента над 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>

Answer 2

Вы хотите, чтобы вы можете нажать а и иметь непрозрачность правильно?

Почему бы просто не использовать сам тег, а не контейнер?

.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