Question

我有一个Wordpress网站，在特色图片上有一个图像叠加，显示标题后。每个叠加层都动态链接到单个帖子页面。（它是特色图片的网格）

一行上的一切正常，但是当标题后占用两行时，将鼠标悬停在某些位置的图像上，则无法识别链接（主要是文本右侧的区域）

CSS

.title-styling h1 { width: 50%; }

.title-styling h1 {
color: #fff;
font: 800 60px/50px "Open Sans";
font-style: italic;
letter-spacing: -3px;
}

/* IMG hover styling */
.box-title {
z-index: 10;
position: absolute;
top: 0px;
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.3s,opacity 0.3s linear;
}

.test-cover {
position: absolute;
top: 0px;
width: 99%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); 
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.25s,opacity 0.25s linear;
}

.hover-decal:hover > .test-cover,
.hover-decal:hover > .box-title {
visibility:visible;
opacity:1;
transition-delay:0s;
}

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"><h1><?php the_title(); ?></h1></a>
        </div>
      </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(); ?>" class="test-cover"></a>
        <a href="<?php the_permalink(); ?>"> <img class="img-responsive" src="<?php echo $image ?>"/></a>
        <?php endif; ?>

    </div>

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

代码获取正确的特色图像和链接并将其放入文章中并放置一个div overop，它作为一个封面透明，具有相同的链接。标题样式是这样完成的，所以我可以使用css的绝对和相对定位。

不确定为什么会这样，我似乎无法用jfiddle重新创建这个问题。

影响链接属性的文本长度

0 个答案: