css - 图像悬停以显示链接

Question

所以我有一个 div，其中将包含一个图像http://www.reversl.net/hovers/我希望图像在悬停时显示两个链接，就像这里显示的布局一样http://www.reversl.net /demo/是否可以仅使用 css 来实现？

Answer 1

您可以使用链接和 css 创建 div：

div.myimage div.links { display:none;} 
div.myimage:hover div.links { display:block;} 

示例 html：

 <div class="myimage">
   <div class="links"> we are the links</div>
   <img src="animage.png" />
</div>

显然你必须设置自己的 div 定位

Answer 2

您可以使用 display:none/block 的另一种方法

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

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

Answer 3

你总是可以使用“不透明度”。

您的标记将是这样的：

<div class="wrapper">
  <img src="example.png" alt="example" />
  <ul class="links">
     <li><a href="">Example Link</a></li>
     <li><a href="">Example Link</a></li>
   </ul>
   </div>

然后在 CSS 中：

 .wrapper {
     position: relative; /*so the absolute positioning works */
  }

 .links {
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;  /*hidden by default */
     width: 100%;
     height: 25px; /*making this up */
  }

  .wrapper:hover .links, .wrapper:focus .links {
     opacity: 1;  /*visible on hover */
   }

对这种技术有几点注意事项：

• 您需要为 IE8 及以下版本使用不透明过滤器，因为他们不了解不透明 CSS 属性
• 正如您似乎打算的那样，我不会推荐这种技术进行导航。触摸设备（智能手机和平板电脑）上的用户并没有真正可以依赖的“悬停”状态。

但是，如果您想要一些奖励积分，对于使用现代浏览器的用户，请添加以下内容：

 .links {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
  }

并且链接将“淡入”——全部使用 CSS。

Answer 4

如果您只想将鼠标悬停在图像上：

div.container { width: 200px; height: 200px; position: relative; }
div.container img { width: 100%; height: 100%; position: absolute; top: 0; }
div.container img:hover { z-index: -1; }
div.container div { width: 100%; position: absolute; top: 0; }
div.container div:hover { z-index: 1; }

（当鼠标悬停在链接上时需要最后一个来消除闪烁）

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