图像叠加悬停"指针事件:无;"在WordPress中不起作用

Question

所以有人给了我一个很好的解决方案，让覆盖可以点击，但它会导致覆盖垂直扩展，打破WordPress中的覆盖效果(尽管在代码笔中看起来很好(。

我找到了另一个解决方案，那就是添加pointer-events: none;，它允许覆盖可以点击，并将您带到另一个url。我试着在WordPress中实现它，因为codepen可以正常工作，但令我沮丧的是，它在WordPress上根本不起作用。

有没有一种替代方案可以在不扩展覆盖网格或破坏WordPress中的覆盖和文本的情况下使覆盖可点击？

目标是使文本仍然保留在图像上，当鼠标悬停时，会出现覆盖，允许您单击以重定向到另一个页面。

CSS

.posts {
position: absolute;
z-index: 1;
bottom: 5px;
color: white;
}
.overlay:after {
content: '';
position: absolute;
display: block;
height: calc(100% - 10px);
width: calc(100% - 10px);
top: 5px;
left: 5px;
background: rgba(0,0,0,0.6);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
pointer-events: none;
}
.overlay:hover:after {
opacity:1;
}

HTML

<div class="js-masonry">
<?php if( have_posts() ): while( have_posts() ): the_post();?>
<div class="item-masonry overlay">
<a href="#">
<div class="posts">
<p><h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ligula sollicitudin, euismod nibh in, feugiat lectus.</h2></p>
</div>
<img src="#"/>
</a>
</div>
<?php endwhile; else: endif;?>
</div>

Answer 1

我发现了这个问题。pointer-events: none;确实有效。

如果你在盒子里写普通文本，整个覆盖层都可以点击。

如果我想调用<?php the_excerpt();?>，由于某种原因，整个超链接都会被调用到摘录中。删除此项将允许整个缩略图和覆盖正确地超链接。

调用<?php the_title();?>和<?php the_date('m-d-y', '<h2>', '</h2>');?>工作正常。