图像链接，实际上比图像宽

Question

我已经准备好了我网站页脚的布局，我希望按照我想象的方式进行，但事实证明它并不像我想象的那么容易。

以下是关于不想正常工作的顽皮链接图像的故事的漫画书：

我想用我的代码做什么：

1. 我想在页面底部制作<footer>。
2. 我使用三个弹性框（<footer>）填充<div>，其分布为25％ - 50％ - 25％。
3. 中间<div>包含底部中心的图片。
4. 中间<div>中包含的图片必须是<a>的链接。

我认为我的代码会做什么：

• 当您单击（!!!）图像时，您将激活链接。

我的代码真正做了什么：

• 当我将鼠标悬停在这个中间<div>区域的任何地方时（这有点棘手！）但是只有从底部到图像高度的任何地方（所以只有中间<div>的下半部分）。链接在包含图像的<div>的整个宽度上也是活动的。链接下面图片中的蓝色区域。您也可以在代码段中看到这一点。

我有CSS样式和HTML代码如下：

footer {
    -webkit-box-flex: 1 100%;
    -moz-box-flex:  1 100%;
    -webkit-flex:  1 100%;
    -ms-flex: 1 100%;
    flex:  1 100%;
    height:200px;
    width:400px;
    background-color:black;
}
footer section {
    margin: 0 auto;
    width:90%;
    height:200px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    background-color:red;
}
.footerLogo{
    -webkit-box-flex: 1 25%;
    -moz-box-flex:  1 25%;
    -webkit-flex:  1 25%;
    -ms-flex: 1 25%;
    flex:  1 25%;
    order:1;
    height:200px;
    background-color:blue;
}
.footerGoUp{
    -webkit-box-flex: 2 50%;
    -moz-box-flex:  2 50%;
    -webkit-flex:  2 50%;
    -ms-flex: 2 50%;
    flex:  2 50%;
    order:2;
    align-self:flex-end;
    height:200px;
    background-color:yellow;
}
.footerSocialLogos{
    -webkit-box-flex: 1 25%;
    -moz-box-flex:  1 25%;
    -webkit-flex:  1 25%;
    -ms-flex: 1 25%;
    flex:  1 25%;
    order:3;
    height:200px;
    background-color:blue;
}
div.asImage{
    height:100px;
    width:50px;
    background-color:green;
    margin:auto;
    margin-top:100px;
}

<footer>
     <section>
         <div class="footerLogo">
         </div>
         <div class="footerGoUp">
             <a href="#top">
                 <div class="asImage">
                 </div>
             </a>
          </div>
          <div class="footerSocialLogos">
          </div>
       </section>
   </footer>

Answer 1

.asImage { display: inline-block; }