Question

我正在使用以下教程http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/index_3.html作为我拥有的两张图片的悬停效果。当你将鼠标悬停在它们上面时，只有放大镜被链接，我希望你在悬停整个区域后进行链接。它可能吗？我一直在玩它，但无法让它工作。任何帮助将不胜感激。

这是HTML

<div class="view third-effect">
<!-- Image goes here -->
<div class="mask"><a href="#" class="info" title="Full Image">
<span class="glyphicon glyphicon-search"></span>
</a></div>
<div class="content">  
</div>
</div>

这是CSS

                 .view {
                   width: 300px;
                   height: 200px;
                   margin: 10px;
                   float: left;
                   border: 5px solid #fff;
                   overflow: hidden;
                   position: relative;
                   text-align: center;
                   box-shadow: 0px 0px 5px #aaa;
                   cursor: default;
                }

                .view .mask, .view .content {
                   width: 300px;
                   height: 200px;
                   position: absolute;
                   overflow: hidden;
                   top: 0;
                   left: 0;
                }

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

                .view a.info .glyphicon .glyphicon-search {
                  /* background:url(../img/link.png) center no-repeat; */
                  position: relative;
                  top: 1px;
                  font-family: 'Glyphicons Halflings';
                  font-style: normal;
                  font-weight: normal;
                  line-height: 1;
                  content: "\e006";
                   display: inline-block;
                   text-decoration: none;
                   padding:0;
                   text-indent:-9999px;
                   width:20px;
                   height:20px;
                }


         .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 .glyphicon .glyphicon-search {
           position:relative;
           top:70px; /* 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;
        }

Answer 1

这在我的测试中运作正常：

修改后的CSS：

.view a.info {
     background:url(/images/link.png) center no-repeat;
     /*display: inline-block;*/
     text-decoration: none;
     padding:0;
     text-indent:-9999px;
     /*width:20px;
     height:20px;*/
     display: block;
     width: 300px;
     height: 200px;
  }

同时注释掉“border：100px”部分（我找到了两个地方）：

 /*border:100px solid rgba(0,0,0,0.7);*/

就是这样，现在可以点击完整的缩略图，而使用mag glass的悬停效果仍然像以前一样。

悬停后将整个div链接起来，而不仅仅是图标

1 个答案: