0

使用字体，我创建了一些图表。将鼠标悬停在图表上时，图表下方会显示文本。这按预期工作。现在我想创建一个页面，在两列中显示许多图表，我column-count: 2;在样式表中完成此操作。但是，现在悬停不适用于所有图表。例如，如果我创建 4 个图表并将它们清楚地显示在彼此下方，则悬停适用于每个单独的图表，但将列数设置为 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 回答