0

我Fiddle这里有一个。

*注意
这使用同位素，但它在 JSFiddle 中无法正常运行。因此，当您使用小提琴时，它不会过滤，但会相应地突出显示适当<div>的 s。

但是，这不是问题......当您输入一个关键字（显示在小提琴上）时，它会缩小到几个文档。然后，当您将鼠标悬停在文档上时，它会显示一个“电子邮件”按钮和一个“PDF”按钮。

在搜索之前，您还可以将鼠标悬停在文档上，看看我在说什么。

根据它显示的 div，图像（不同元素的背景）显示在不同的位置。

我无法让它们显示在每个橙色方块的同一个位置。

这是主要的CSS <div>...

.iso-container li   {
  width: 140px;
  height: 140px;
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #f8981d;
  font-size: 0.01em;
  color: #f8981d;
  background-image: url(../images/doc-pdf.png);
  -webkit-border-top-right-radius: 1.2em;
  -webkit-border-bottom-left-radius: 1.2em;
  -webkit-border-top-left-radius: 1.2em;
  -webkit-border-bottom-right-radius: 1.2em;
      -moz-border-radius-topright: 1.2em;
      -moz-border-radius-topleft: 1.2em;
      -moz-border-radius-bottomright: 1.2em;
      -moz-border-radius-bottomleft: 1.2em;
          border-top-right-radius: 1.2em;
          border-top-left-radius: 1.2em;
          border-bottom-right-radius: 1.2em;
          border-bottom-left-radius: 1.2em;
            border-radius: 1.2em;
            behavior: url(pie/PIE.htc);
}

这是悬停时出现的图像元素的 CSS...

.popover-email {
  display: none;
  width:  27px;
  height: 24px;
  background-image: url(../images/bxw_email.png);
  background-repeat: no-repeat;
  position: fixed;
  top: 65px;
  left: -100px;
}

.item:hover .popover-email { display: block; }

.popover-pdf {
  display: none;
  width:  25px;
  height: 27px;
  background-image: url(../images/pdf-button.png);
  background-repeat: no-repeat;
  position: fixed;
  top: 65px;
  left: -30px;
}

.item:hover .popover-pdf { display: block; }

.item:hover {
  z-index: 10;
}
4

1 回答 1

1

position:absoluteon.doc *是罪魁祸首。删除它，然后调整你的top和left定位，你就会被设置。

于 2013-09-16T20:04:28.680 回答