0

ここがありFiddleます。

*注意
これはアイソトープを使用していますが、JSFiddle では正しく機能していません。したがって、フィドルを使用すると、フィルター処理は行われませんが、それに<div>応じて適切な s が強調表示されます。

ただし、それは問題ではありません...キーワードの1つを入力すると（フィドルに表示されます）、いくつかのドキュメントに絞り込まれます。次に、ドキュメントにカーソルを合わせると、[メール] ボタンと [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:absoluteオン.doc *が犯人です。topそれを外して位置を調整leftすれば完成です。

于 2013-09-16T20:04:28.680 に答える