jquery - 悬停链接将出现在图像上

Question

如果图像悬停，我希望我的链接显示在图像的中心。怎么做？我更喜欢使用纯 css，但如果需要 jquery 也没问题。

<div class="container">
<img src="an_img.jpg">
<div> <a href="a link">i want this link on center</a> </div>
</div>

CSS:

<style>

    div.container { width: 200px; height: 200px; position: relative; }
    div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
    div.container div { width: 100%; position: absolute; top: 0; display: none; }
    div.container img:hover + div { display: block; }
    div.container div:hover { display: block; }
 </style>

就像这样: http://jsfiddle.net/gye6f9yh/

但我想要图像的垂直和水平中心。

Answer 1

这应该有所帮助!

   .container{
     position:relative;
   }
   .container div { 
    display:none;
    border:solid ;
   }
    .container img:hover + div{
     display:block;
     position:absolute;
      left:11%;
      top:45%;
    }

<div class="container" style="width: 202px;">
<img src="an_img.jpg" style="width: 202px;background-color:green">
<div> <a href="a link" style="color:red;">i want this link on center</a> </div>
</div>