錨元素不工作時：在僞元素之前

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

錨元素不工作時：在僞元素之前

回答

相關問題