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及以下版本使用opacity filter，因为他们不了解不透明度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>

图像悬停以显示链接

4 个答案: