图像叠加悬停“pointer-events: none;”在 WordPress 中不起作用？

Question

所以有人给了我一个很好的解决方案，使叠加层可点击，但它导致叠加层垂直扩展，破坏了 WordPress 中的叠加效果（尽管在 codepen 中看起来不错）。

我找到了另一种解决方案，即添加 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>');?> 工作正常。

图像叠加悬停“pointer-events: none;”在 WordPress 中不起作用？

Image Overlay Hover “pointer-events: none;” does not work in WordPress?

html

css

wordpress

wordpress-theming