html - Bootstrap Rollover Div 链接

Question

我想制作一个包含一些内容的 div，当鼠标滑过 div 时，div 中会出现三个链接。像这样:

我一直在通过 Stack 和谷歌进行搜索，但找不到使用三个不同 ahref 标签实现此功能的方法。

html

.container
  .col-md-4
    .pdf-thumb-box
      a(href='#')
        .pdf-thumb-box-overlay
          span.fa-stack.fa-lg
            i.fa.fa-square-o.fa-stack-2x.pdf-thumb-square
            i.fa.fa-eye.fa-stack-1x.pdf-thumb-eye
        img.img-responsive(src='http://lorempixel.com/400/300/technics/')
    .vertical-social-box

  .col-md-4
    .pdf-thumb-box
      a(href='#')
        .pdf-thumb-box-overlay
          span.fa-stack.fa-lg
            i.fa.fa-square-o.fa-stack-2x.pdf-thumb-square
            i.fa.fa-eye.fa-stack-1x.pdf-thumb-eye
        img.img-responsive(src='http://lorempixel.com/400/300/technics/')
    .vertical-social-box

  .col-md-4
    .pdf-thumb-box
      a(href='#')
        .pdf-thumb-box-overlay
          span.fa-stack.fa-lg
            i.fa.fa-square-o.fa-stack-2x.pdf-thumb-square
            i.fa.fa-eye.fa-stack-1x.pdf-thumb-eye
        img.img-responsive(src='http://lorempixel.com/400/300/technics/')

CSS

.pdf-thumb-box
  display: inline-block !important
  position: relative !important
  overflow: hidden

.pdf-thumb-box-overlay
  visibility: hidden
  opacity: 0
  transition: visibility 0s linear 0.5s,opacity 0.5s linear

.pdf-thumb-box a
  color: transparent
  &:hover .pdf-thumb-box-overlay
    visibility: visible
    opacity: 1
    transition-delay: 0s
    text-align: center
    position: absolute
    background-color: rgba(255, 0, 0, 0.58)
    color: #fff
    width: 100%
    height: 100%
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6)

.pdf-thumb-box-overlay span
  margin: auto
  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0

Answer 1

> DEMO

HTML

<div id="rollover">
    <div id="container">
        <a class="link" href="#">
            <img src="http://i.imgur.com/X2faVAp.png"></a>
        <a class="link" href="#">
            <img src="http://i.imgur.com/cd4iQS1.png"></a>
        <a class="link" href="#">
            <img src="http://i.imgur.com/Ioxt4re.jpg"></a>
    </div>
</div>

CSS

#rollover {
    width: 170px;
    height: 55px;
    padding: 20px;
    background-color: #7FFFD4;
}
#container {
    opacity: 0;
    transition: opacity 0.3s linear; /* vendorless fallback */
    -o-transition: opacity 0.3s linear; /* opera */
    -ms-transition: opacity 0.3s linear; /* IE 10 */
    -moz-transition: opacity 0.3s linear; /* Firefox */
    -webkit-transition: opacity 0.3s linear; /*safari and chrome */
}
#container:hover {
    opacity: 100;
}
img {
    width: 50px;
    height: 50px;
}