悬停链接将出现在图像上

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

您可以使用:hover属性来显示您的链接。

首先使链接在CSS中不可见：

.product a {
    display: none;
}

当你将鼠标悬停在它上面时再次显示它：

.product:hover a {
    display: block;
}

Answer 2

使用HTML MAP TAG

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Answer 3

这应该有帮助！

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

请检查一次。

        .container { width: 200px; height: 200px; position: relative; white-space: nowrap; text-align: center; }
        .container img { width: 100%; height: 100%; position: absolute; top: 0;left: 0; }
div.container:after{
    display: inline-block;
    content: '';
    height: 200px;
    vertical-align: middle;
    margin-right: -0.25em;
    width:1px;
    overflow:hidden;
}
.centered{
    vertical-align:middle;
    display:none;
    white-space:normal;
}
div.container:hover .centered{display: inline-block;}

<div class="container">
    <img src="an_img.jpg">
    <div class="centered"> <a href="#">A link should be center</a> </div>
</div>