图像叠加Hover“指针-事件:无；”在WordPress中不工作？

Question

因此，有人给了我一个很好的解决方案，使覆盖点击，但它导致覆盖垂直扩展，打破了覆盖效果在WordPress (虽然它看起来不错的代码)。

我找到了另一个解决方案，就是添加pointer-events: none;，它允许点击覆盖，将您带到另一个url。我尝试将它实现到WordPress中，因为代码依赖功能是它应该实现的，但令我沮丧的是，它在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;
}

<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>');?>可以正常工作。