Question

使用字体，我创建了一些图表。将鼠标悬停在图表上时，文本会显示在图表下方。这按预期工作。现在我想创建一个页面，其中包含两列显示的图表，我通过样式表中的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>

Answer 1

</body>结束标记已被注释掉。把它写成 -

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

尝试将column-count: 2;添加到.wrapper

使用列计数时在悬停时显示文本

1 个答案: