悬停链接将出现在图像上答案

【问题标题】：On hover link will appear on image悬停链接将出现在图像上
【发布时间】：2015-02-06 10:04:59
【问题描述】：

如果图像悬停，我希望我的链接会出现在图像的中心。怎么做？我更喜欢使用纯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/

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

【问题讨论】：

Image hover to reveal links的可能重复
应该出现哪个链接，“产品名称”？
@Ancient 我编辑了，我想喜欢它，但链接在图片的中心
@A'aquMuhammadDyasYaskur 你能添加你当前的css吗？还要尽量避免一次问多个问题：“如何使链接出现在悬停状态”和“如何使我的链接居中”是两个独立的问题（也可以通过谷歌搜索轻松解决）。总是先尝试自己做一些研究。
@DarkAshelin 就像顶部的链接一样。我已经用谷歌搜索了大约一个小时但没有找到，也许我只是不知道关键字。

标签： jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

使用 HTML 地图标签

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

【讨论】：

【解决方案3】：

您可以使用:hover 属性使您的链接可见。

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

.product a {
    display: none;
}

然后当你将鼠标悬停在它上面时让它再次可见：

.product:hover a {
    display: block;
}

【讨论】：

【解决方案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>

【讨论】：