hover交互异常求助：文本与span始终显示，字体可读性不佳

AI 小北

2026-5-14

问题修复方案

一、解决Hover时才显示元素的问题

你的核心问题是<h2>和三个<span>元素默认就处于显示状态，我们需要通过CSS设置它们默认隐藏，仅当鼠标悬停在.one这个<li>上时才显示出来：

步骤1：默认隐藏目标元素

先给<h2>和三个span添加默认隐藏的样式：

/* 默认状态下隐藏h2与三个span */
.one h2,
.one .h1,
.one .h2,
.one .h3 {
  display: none;
  /* 要是想要平滑的过渡效果，可以替换成下面的代码：
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  */
}

步骤2：Hover时触发显示

当鼠标悬停在.one上时，将这些元素切换为显示状态：

/* 鼠标悬停在li上时，显示目标元素 */
.one:hover h2,
.one:hover .h1,
.one:hover .h2,
.one:hover .h3 {
  display: block;
  /* 如果用了过渡效果，替换成：
  opacity: 1;
  visibility: visible;
  */
}

小提示：用opacity+visibility搭配过渡的方式，会比直接切换display更流畅，能提升用户交互的体验感。

二、提升字体可读性的建议

针对字体可读性差的问题，给你几个实用的优化方向：

使用系统字体栈：选择跨平台都有良好显示效果的无衬线字体，避免过于小众或装饰性的字体，比如：

.one h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

调整字体大小与行高：确保标题大小合适（建议至少1.5rem即24px），同时设置合理的行高（line-height: 1.4~1.6），避免文字过于拥挤：
```
.one h2 {
  font-size: 1.5rem;
  line-height: 1.5;
}
```
保证颜色对比度：文本颜色和背景色的对比度要符合WCAG标准（至少4.5:1），比如用深色文本搭配浅色背景，避免浅灰配白色这类低对比度组合。
添加适当间距：给<h2>和周围元素增加内边距或外边距，避免文字和图片/装饰元素过于贴近：
```
.one h2 {
  padding: 0.5rem 0;
  margin: 0.25rem 0;
}
```