CSS悬停效果不能完全覆盖所有图像

Question

在我的WordPress类别页面上，我显示了许多文章及其缩略图，其效果是在悬停时显示黑色叠加效果，但如果图像比大多数文章略大，则叠加会稍微突破并显示一个沟。我提供了一个链接，将鼠标悬停在最后2个上进行测试。

*另外，a href =“＃”链接只能在出现的图标上点击，而不是我想要的整个图像。我指的是第一个覆盖整个div的href。

http://bit.ly/1wtnY3d

<a href="#">
<div class="category-article-thumbnail">
    <div class="view third-effect">
        <?php the_post_thumbnail(); ?>
        <div class="mask">
            <a href="<?php the_permalink() ?>" class="info" title="View Article"><i class="fa fa-search"></i></a>
        </div>
        <div class="category-label"><?php single_cat_title( '', true ); ?></div>
        <!-- <i class="category-label-end"></i> -->
    </div>
</div>
</a>

CSS

    /** CSS3 Hover Effects **/

.view {
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   max-height: 227px;
}

.view .mask {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view img {
   display: block;
   position: relative;
}

.view a.info {
   background:url('http://highways.designlocker.co.uk/wp-content/themes/highways/images/article-click-icon3.png') center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:60px;
   height:52px;
}

.third-effect .mask {
   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}

.third-effect a.info {
   position:relative;
   top:-30px; /* Center the link */
   opacity: 0;
   transition: opacity 0.5s 0s ease-in-out;
}

.third-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}

.third-effect:hover a.info {
   opacity:1;
   transition-delay: 0.3s;
}

/** end CSS3 Hover Effects **/

Answer 1

您嵌套了a个无效HTML标签。

你需要修复你的html，因为浏览器渲染html的方式与你想象的不同，以便修复无效的html。