hover a标签时对应div的过渡显示效果实现问题

嘿，我懂你遇到的麻烦了——用display: none/block控制显示隐藏的话，CSS过渡根本不会生效，因为这俩属性的切换是瞬间完成的，浏览器不会为这种突变生成过渡动画。

咱们换个思路，用支持过渡的属性来模拟隐藏和显示效果，比如opacity（透明度）和height（高度），这样就能让动画平滑过渡起来了。

修改后的完整CSS代码 #

nav { 
  position: fixed; 
  background-color: #fafafa; 
  top: 0; 
  width: 100%; 
  border-bottom: 1px solid #cacaca; 
} 

nav li { 
  display: inline-block; 
  padding: 0 1em; 
} 

nav li a { 
  color: #939393; 
  font-weight: 400;
  /* 如果你需要a标签本身的过渡效果，保留这行 */
  transition: color 3s ease; 
} 

nav li div{
  opacity: 0; /* 初始完全透明 */
  height: 0; /* 初始高度为0，模拟隐藏 */
  transition: all 3s ease; /* 指定过渡的属性和时长 */
  overflow: hidden; /* 防止高度为0时出现意外溢出 */
  /* 每个div的内联背景色会正常生效，不用额外修改 */
} 

nav li a:hover + div{
  opacity: 1; /* hover时恢复完全不透明 */
  height: 10px; /* 还原到目标高度 */
}

/* 可选：如果需要hover时a标签变色，加上这段 */
nav li a:hover {
  color: #333;
}

为什么这样能生效？ #

• opacity和height都是CSS支持过渡的属性，浏览器会在指定时长内平滑地从初始值过渡到目标值。
• 用height: 0配合overflow: hidden可以完美模拟隐藏状态，避开display: none带来的瞬间切换问题。
• 你原来给每个div设置的内联背景色样式会正常生效，不会被新增的样式覆盖。

直接替换原来的CSS代码测试一下，现在hover的时候应该能看到div慢慢显现的过渡动画了～

内容的提问来源于stack exchange，提问作者YannB