0

フォントを使用して、いくつかの図を作成します。図にカーソルを合わせると、図の下にテキストが表示されます。これは期待どおりに機能します。ここで、多数のダイアグラムを 2 列に表示するページを作成したいと考えており、これをcolumn-count: 2;スタイル シートで行います。ただし、ホバリングはすべての図で機能しないようになりました。たとえば、4 つのダイアグラムを作成し、それらを上下に並べて表示すると、個々のダイアグラムでホバリングが機能しますが、列数を 2 に設定すると、ホバリングは左側の 2 つのダイアグラムでのみ機能します。

CSS コード:

@font-face {
font-family: diagramfont;
src: url("diagramfont.ttf");
}

body {
column-count: 2; /* Removing this instruction and hovering works on all diagrams */
}

.wrapper {
position: relative;
padding-bottom: 30px;
}

.diagram {
font-family: diagramfont;
font-size: x-large;
}

.overlay {
display: none;
position: absolute;
left: 0;
bottom: 0;
text-align: center;
}

.wrapper:hover .overlay {
display: block;
}

xhtml:

<body>
<div class="wrapper">
  <div class="diagram">
  Text for diagram
  </div>
  <span class="overlay">
      Text to overlay
  </span>
</div>
<!-- Sequence of diagrams like recent structure --!>
</body>
4

1 に答える 1

1

</body>終了タグはコメントアウトされています。次のように書きます -

<!-- Sequence of diagrams like recent structure -->
</body>

に追加column-count: 2;してみてください.wrapper

于 2012-10-18T10:05:42.513 に答える