::before 伪元素时锚元素不起作用
anchor element not working when ::before pseudo element
我在父元素上应用了一些样式 ::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="["label_0"]">
<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>
您已经将伪元素完全定位在 link 上..所以鼠标自然无法点击它。
您将伪元素移动到实际 link。
.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>
您想要它以便您可以单击 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;
}
我在父元素上应用了一些样式 ::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="["label_0"]">
<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>
您已经将伪元素完全定位在 link 上..所以鼠标自然无法点击它。
您将伪元素移动到实际 link。
.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>
您想要它以便您可以单击 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;
}