Question

我的悬停效果应用于我的帖子的特色图片，（我的网站基本上是特色图片的网格）。我能够获得帖子标题以显示特色图像的顶部，并且我将帖子标题的大小设置为100％宽度和高度，并带有彩色背景。

我的问题是图像是链接，当它悬停在图像上时会覆盖图像，我无法点击链接。

我研究过使用pointer-events: none;作为可能的解决方案。

但是，如果它是跨浏览器兼容和/或是否应该使用它，会有不同的看法。

如果不是，有没有办法让底部链接可以通过悬停事件点击？

css代码

.box-title {
display: none;
position: absolute;
top: 0px;
width: 99%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

.title-styling {
position: relative;
margin-top: 40%;    
}

.hover-decal:hover > .box-title {
display: block;
}

html代码

<article id="post-<?php the_ID(); ?>" <?php post_class('col-md-4 col-sm-4 pbox '); ?>>

<div class="hover-decal">

      <div class="box-title"><div class="title-styling"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></div></div>
      <!-- <div class="box-meta"><?php the_category(', '); ?></div> --!> 

    <?php
        $thumb = get_post_thumbnail_id();
        $img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
        $image = aq_resize( $img_url, 750, 560, true ); //resize & crop the image
    ?>  

        <?php if($image) : ?>
        <a href="<?php the_permalink(); ?>"> <img class="img-responsive" src="<?php echo $image ?>"/></a>
        <?php endif; ?>

    </div>

</article><!-- #post-## -->

此外，我还设法将网站标题文本作为帖子的链接（但与图像相比较小）。有没有办法在仍然覆盖图像的同时使链接的标题部分成为“背景”？

我应该使用指针事件吗？

0 个答案: